123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <div class="p-4">
- <BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel">
- </BasicTable>
- </div>
- </template>
- <script lang="ts">
- import { defineComponent } from 'vue';
- import { BasicTable, useTable, BasicColumn, EditTableHeaderIcon } from '/@/components/Table';
- import { optionsListApi } from '/@/api/demo/select';
- import { demoListApi } from '/@/api/demo/table';
- const columns: BasicColumn[] = [
- {
- 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: '数字输入框',
- dataIndex: 'id',
- edit: true,
- editRule: true,
- editComponent: 'InputNumber',
- width: 200,
- },
- {
- 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,
- },
- {
- 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,
- },
- ];
- export default defineComponent({
- components: { BasicTable, EditTableHeaderIcon },
- setup() {
- const [registerTable] = useTable({
- title: '可编辑单元格示例',
- api: demoListApi,
- columns: columns,
- showIndexColumn: false,
- bordered: true,
- });
- function handleEditEnd({ record, index, key, value }: Recordable) {
- console.log(record, index, key, value);
- }
- function handleEditCancel() {
- console.log('cancel');
- }
- return {
- registerTable,
- handleEditEnd,
- handleEditCancel,
- };
- },
- });
- </script>
|