@sxliqi/editable-table v1.0.8

安装

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

Column

Rules

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

Events