安装

npm install @sxliqi/editable-table

引入依赖文件

import { createApp } from "vue";
import App from "./App.vue";

import "@sxliqi/editable-table/dist/index.css";
import EditableTable from "@sxliqi/editable-table";

createApp(App).use(EditableTable).mount("#app");

在页面编辑组件

<template>
    <div style="margin: 20px;padding:20px;border:1px solid #dedede;">
        <EditableTable
            ref="editTable"
            :columns="columns"
            v-model:data-source="dataSource"
            row-first-key="name"
            show-search
            show-footer
            :rules="rules"
        >
            <template #toolBtn>
                <vxe-button @click="insert5">新增5行</vxe-button>
                <vxe-button @click="insertAt(3)">在第3行处插入</vxe-button>
                <vxe-button @click="getSelect">获取选中</vxe-button>
                <vxe-button @click="getRecordSet">获取表格变动数据</vxe-button>
                <vxe-button @click="getTableData">获取表格数据</vxe-button>
                <vxe-button @click="updateTable">更新表格数据</vxe-button>
                <vxe-button @click="validateAll">校验表格数据</vxe-button>
            </template>
            <template #age_edit="{ row, rowIndex }">
                <input
                    type="text"
                    class="test-input"
                    v-model="row.age"
                    @keyup="($event) => onKeyUp($event, 'address', row, rowIndex)"
                />
            </template>
        </EditableTable>
    </div>
    <div>
        <div>[</div>
        <div style="text-indent: 2em">
            <div v-for="item in dataSource" :key="item">{{ JSON.stringify(item) }}</div>
        </div>
        <div>]</div>
    </div>
</template>

<script>
    import { ref } from "vue";
    import dataCheck from "./utils/dataCheck";

    export default {
        name: "App",
        setup() {
            const columns = [
                {
                    key: "name",
                    title: "姓名",
                    nextKey: "sex",
                    edit: true,
                    columnProps: {
                        minWidth: 200
                    }
                },
                {
                    key: "sex",
                    title: "性别",
                    nextKey: "age",
                    edit: true
                },
                {
                    key: "age",
                    title: "年龄",
                    nextKey: "address",
                    edit: false,
                    sum: true,
                    slots: {
                        edit: false
                    },
                    editRender: {
                        autofocus: ".test-input",
                        autoselect: true
                    }
                },
                {
                    key: "address",
                    title: "地址",
                    nextKey: "role",
                    edit: true
                },
                {
                    key: "role",
                    title: "角色",
                    nextKey: "nextLine",
                    edit: true
                }
            ];
            const rules = {
                name: [dataCheck.required({})],
                sex: [dataCheck.required({})]
            };
            const dataSource = ref([
                { id: 10001, name: "Test1", role: "Develop", sex: "Man", age: 28, address: "test abc" },
                { id: 10002, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" },
                { id: 10003, name: "Test3", role: "PM", sex: "Man", age: 32, address: "Shanghai" },
                { id: 10004, name: "Test4", role: "Designer", sex: "Women", age: 24, address: "Shanghai" }
            ]);

            const editTable = ref();

            const insert5 = () => {
                const { insert } = editTable.value.tableEvent;
                insert(-1, [{}, {}, {}, {}, {}]);
            };
            const insertAt = (rowIndex) => {
                const { insert, getTableData } = editTable.value.tableEvent;
                insert(getTableData().tableData[rowIndex - 1]);
            };
            const getSelect = () => {
                const { getSelect } = editTable.value.tableEvent;
                getSelect();
            };
            const getRecordSet = () => {
                const { getRecordSet } = editTable.value.tableEvent;
                getRecordSet();
            };
            const getTableData = () => {
                const { getTableData } = editTable.value.tableEvent;
                getTableData();
            };
            const updateTable = () => {
                const { update } = editTable.value.tableEvent;
                update();
            };
            const validateAll = () => {
                const { validateAll } = editTable.value.tableEvent;
                validateAll()
                    .then(() => {
                    })
                    .catch((errMap) => {
                        console.log(errMap);
                    });
            };
            const onKeyUp = (e, nextKey, row, rowIndex) => {
                const { onKeyupToNext } = editTable.value.inputEvent;
                onKeyupToNext(e, nextKey, row, rowIndex);
            };

            return {
                columns,
                rules,
                dataSource,

                editTable,

                insert5,
                insertAt,
                getSelect,
                getRecordSet,
                getTableData,
                updateTable,
                validateAll,
                onKeyUp
            };
        }
    };
</script>

<style scoped></style>

API

Props

| 参数 | 说明 | 类型 | 默认值 | |------------------|----------------------------------------------------------|--------------------------------------|-------| | columns | 表格列的配置描述，具体项见下方 | array | - | | rowFirstKey | 表格第一列显示在字段 | string | - | | dataSource | 数据数组 | object[ ] | | | rules | 表单验证规则，具体见下表 | object | | | showToolBar | 是否显示顶部工具栏boolean | boolean | true | | maxHeight | 表格最大高度 | number | 500 | | rowHeight | 表格行高，建议>=50 | number | 50 | | showSearch | 是否显示内容搜索模块 | boolean | false | | showFooter | 是否显示底部内容。默认显示合计。 | boolean | false | | footerMethod | 表尾的数据获取方法，返回一个二维数组，当showFooter 为 true时生效。默认为计算合计的方法。 | ({ columns, data }) => any[][] | | | addNewLineAtLast | 是否在最后一行，最后一列点击Enter时新增一行空数据 | boolean | true | | virtualScroll | 是否启用虚拟滚动技术，加载数据较多时使用。建议仅在查看数据时使用。 | boolean | false | | inputChange | 当输入框内容更改时触发的事件 | event，参数({value, key, row, rowIndex) | |

Column

| 参数 | 说明 | 类型 | 默认值 | |:--------------|:-------------------------------------------------------------------------------------------------------------------|:-----------------|:-------------------------------------------| | key | 列数据在数据项中对应的字段 | string | - | | title | 列数据在数据项中对应的标题 | string | - | | nextKey | 点击Enter，跳转列对应的字段值，当设置为nextLine时跳转到下一行或新增一行 | string | | | sum | 当showFooter为true时，footerMethod为默认方法，自动计算对应列的合计 | boolean | false | | edit | 对应列的单元格是否允许编辑 | boolean | false | | slots | 分别对应相应插槽 [edit,content,default],当对应属性开启时，可以使用对应的插槽，插槽名对应相应的设置。如：key:'age' ,slots:{edit:true},相应的插槽名age_edit。 | string | {edit:false,content:false,default:false} | | editRender | 当edit设置true时，editRender才可配置，具体见 vxe-column | object | { } | | columnProps | vxe-table 中column的配置，除了title,field,edit-render均可配置，具体见 vxe-column | object | { } | | batch | 对应列是否允许批量设置 | boolean | false | | batchType | 对应列批量设置的类型 | string | 无，可选值date,number | | batchCallback | 对应列批量设置后的回调 | function,参数row | 无 |

Rules

| 参数 | 说明 | 类型 | 默认值 | |:-----------|:---------------------------------------------------------------------------------|:-------------------------------------------|:---------| | trigger | 校验触发的时机 | 'blur' | 'change' | ['change', 'blur'] | - | | enum | 枚举类型 | string | - | | len | 字段长度 | number | - | | max | 最大长度 | number | - | | message | 校验文案 | string | - | | min | 最小长度 | number | - | | pattern | 正则表达式校验 | RegExp | - | | required | 是否必选 | boolean | false | | transform | 校验前转换字段值 | function(value) => transformedValue:any | - | | type | 内建校验类型，可选项 | string | 'string' | | validator | 自定义校验（注意，callback 必须被调用） | function(rule, value, callback) | - | | whitespace | 必选时，空格是否会被视为错误 | boolean | false |

更多高级用法可研究 async-validator ，用法同 ant-design-vue

Events

| 事件名称 | 说明 | 参数 | |:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------| | tableEvent.insert | 插入数据。参数row代表 表格数据中的某一行，不填的话，在第一行新增；填-1在最后一行新增；填表格数据某一行，在对应行新增。参数length代表添加的行数。 | Function(row = -1, length = 1) | | tableEvent.remove | 删除选中的行数据 | | | tableEvent.update | 更新dataSource数据源（一般不使用） | | | tableEvent.reloadData | 重新加载表格数据 | Function(data) | | tableEvent.getTableData | 获取表格的数据 { footerData:[],fullData:[],tableData:[],visibleData:[] } | | | tableEvent.getSelect | 获取表格的选中数据 | | | tableEvent.getRecordSet | 获取表格变动数据 { insertRecords:[],removeRecords:[],updateRecords:[] } | | | tableEvent.setActiveCell | 设置表格激活的单元格。参数row代表表格数据中的某一行，参数key代表对应列的字段。 | Function(row,key) | | tableEvent.validateAll | 根据规则rules校验表格全部内容，返回Promise对象 | | | inputEvent.onKeyupToNext | 当内部编辑输入框点击Enter按键时，自动跳转到下一列，当在最后一列，自动新增一行空数据。参数nextKey为跳转对应的字段值，当设置为nextLine时跳转到下一行或新增一行；row表示当前行数据，通过插槽获取；rowIndex表示当前行对应 的行数，通过插槽获取。 | Function($event, nextKey, row, rowIndex) | | inputEvent.onInputChange | 输入框编辑内容更改时的事件 | Function(e, key, row, rowIndex) |