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
| <script lang="ts">
| import { defineComponent } from 'vue';
|
| import { Switch } from 'ant-design-vue';
| import { isFunction } from 'lodash-es';
|
| export default defineComponent({
| name: 'TableSwitch',
| components: {
| Switch,
| },
| inheritAttrs: false,
| props: {
| modelValue: {
| type: [Boolean, String, Number],
| default: false,
| },
| checkedText: {
| type: String,
| default: '启用',
| },
| unCheckedText: {
| type: String,
| default: '禁用',
| },
| // 使用严格相等判断 类型要正确
| checkedValue: {
| type: [Boolean, String, Number],
| default: '0',
| },
| unCheckedValue: {
| type: [Boolean, String, Number],
| default: '1',
| },
| api: {
| type: Function,
| required: false,
| default: null,
| },
| reload: {
| type: Function,
| required: false,
| default: null,
| },
| },
| emits: ['update:modelValue'],
| setup(props, { emit }) {
| type CheckedType = boolean | number | string;
| async function onChange(checked: CheckedType, e: Event) {
| // 阻止事件冒泡 否则会跟行选中冲突
| e.stopPropagation();
| const { checkedValue, unCheckedValue } = props;
| // 原本的状态
| const lastStatus =
| checked === checkedValue ? unCheckedValue : checkedValue;
| // 切换状态
| emit('update:modelValue', checked);
| const { api, reload } = props;
| try {
| isFunction(api) && (await api());
| isFunction(reload) && (await reload());
| } catch {
| emit('update:modelValue', lastStatus);
| }
| }
|
| return {
| onChange,
| };
| },
| });
| </script>
|
| <template>
| <Switch
| v-bind="$attrs"
| :checked="modelValue"
| :checked-children="checkedText"
| :checked-value="checkedValue"
| :un-checked-children="unCheckedText"
| :un-checked-value="unCheckedValue"
| @change="onChange"
| />
| </template>
|
|
