1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <template>
| <el-cascader
| :style="{ width }"
| :disabled="disabled"
| v-model="data.value"
| :options="data.options"
| :props="data.props"
| @change="handlerChange"
| ></el-cascader>
| </template>
|
| <script>
| import { reactive, onBeforeMount, watch } from "vue";
| // API
| // import { CommonApi } from "@/api/common";
| // requestUrl
| // import ApiUrl from "@/api/requestUrl";
| export default {
| name: "BasisCascader",
| components: {},
| props: {
| cascaderProps: {
| type: Object,
| default: () => ({}),
| },
| url: {
| type: String,
| default: "",
| },
| method: {
| type: String,
| default: "post",
| },
| data: {
| type: Object,
| default: () => ({}),
| },
| value: {
| type: [String, Number],
| default: 0,
| },
| width: {
| type: String,
| default: "100%",
| },
| disabled: {
| type: Boolean,
| default: false,
| },
| },
| emits: ["update:value", "callback"],
| setup(props, { emit }) {
| const data = reactive({
| props: props.data.props,
| options: [],
| value: 0,
| });
| const handlerChange = (value) => {
| // 获取最后一项
| const val = value[value.length - 1];
| // 返回
| emit("update:value", val);
| };
| /** 获取列表 */
| const getData = () => {
| const url = ApiUrl?.cascader?.[props.url || props?.data?.url]?.url;
| const method = ApiUrl?.cascader?.[props.url]?.method || "post";
| if (!url) {
| throw new Error("url地址不存在");
| }
| // 参数
| const request_data = {
| url,
| method,
| data: props.data,
| };
| // CommonApi(request_data).then((response) => {
| // data.options = response.data;
| // });
| };
| /** 生命周期挂载之前 */
| onBeforeMount(() => {
| getData();
| });
| /** 监听 */
| watch(
| () => props.value,
| (newValue) => {
| data.value = newValue;
| }
| );
|
| return { data, handlerChange };
| },
| };
| </script>
|
|