You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
2.9 KiB
134 lines
2.9 KiB
<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>
|
|
|