Blame view

src/views/demo/table/EditCellTable.vue 3.3 KB
1
2
<template>
  <div class="p-4">
3
4
5
6
7
    <BasicTable
      @register="registerTable"
      @edit-end="handleEditEnd"
      @edit-cancel="handleEditCancel"
    />
8
9
10
11
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
12
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
13
  import { optionsListApi } from '/@/api/demo/select';
14
15
16
17

  import { demoListApi } from '/@/api/demo/table';
  const columns: BasicColumn[] = [
    {
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
      title: '输入框',
      dataIndex: 'name',
      edit: true,
      editComponentProps: {
        prefix: '$',
      },
      width: 200,
    },
    {
      title: '默认输入状态',
      dataIndex: 'name7',
      edit: true,
      editable: true,
      width: 200,
    },
    {
      title: '输入框校验',
      dataIndex: 'name1',
      edit: true,
      // 默认必填校验
      editRule: true,
      width: 200,
    },
    {
      title: '输入框函数校验',
      dataIndex: 'name2',
      edit: true,
      editRule: async (text) => {
        if (text === '2') {
          return '不能输入该值';
        }
        return '';
      },
      width: 200,
    },
    {
      title: '数字输入框',
55
      dataIndex: 'id',
56
57
58
59
      edit: true,
      editRule: true,
      editComponent: 'InputNumber',
      width: 200,
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
      title: '下拉框',
      dataIndex: 'name3',
      edit: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: 'Option1',
            value: '1',
          },
          {
            label: 'Option2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程下拉',
      dataIndex: 'name4',
      edit: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
      },
      width: 200,
89
90
    },
    {
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
      title: '日期选择',
      dataIndex: 'date',
      edit: true,
      editComponent: 'DatePicker',
      editComponentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
      width: 200,
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      edit: true,
      editComponent: 'TimePicker',
      editComponentProps: {
        valueFormat: 'HH:mm',
        format: 'HH:mm',
      },
      width: 200,
    },
    {
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
      title: '勾选框',
      dataIndex: 'name5',
      edit: true,
      editComponent: 'Checkbox',
      editValueMap: (value) => {
        return value ? '是' : '否';
      },
      width: 200,
    },
    {
      title: '开关',
      dataIndex: 'name6',
      edit: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value ? '开' : '关';
      },
      width: 200,
131
132
133
    },
  ];
  export default defineComponent({
134
    components: { BasicTable },
135
136
137
138
139
140
    setup() {
      const [registerTable] = useTable({
        title: '可编辑单元格示例',
        api: demoListApi,
        columns: columns,
        showIndexColumn: false,
141
        bordered: true,
142
143
      });
144
145
146
147
148
149
150
151
      function handleEditEnd({ record, index, key, value }: Recordable) {
        console.log(record, index, key, value);
      }

      function handleEditCancel() {
        console.log('cancel');
      }
152
153
      return {
        registerTable,
154
155
        handleEditEnd,
        handleEditCancel,
156
157
158
159
      };
    },
  });
</script>