ant-design-vue在数据报表编辑时实现正则校验本次的demo是基于and-design-vue@1.7.8,

本次的demo是基于and-design-vue@1.7.8, vue@2.6.X版本

一、技术选型与版本

• 使用了 Ant Design Vue 1.7.8 和 Vue 2.6.X 版本进行开发。

二、主要功能实现

1. 可编辑表格：

   • 通过在 <a-table> 组件中使用 slot 来自定义表格的单元格内容。
   • 对于可编辑的单元格，使用 <a-form-item> 包裹输入组件（<a-input> 和 <a-input-number>），实现了在表格中直接编辑数据的功能。
   • 通过 v-model 绑定数据，使得输入组件的值与表格数据中的对应字段同步更新。

2. 校验功能：

   • 为每个可编辑的单元格添加了校验状态和帮助信息。
   • 通过自定义函数 getValidateStatus(record, field) 和 getHelpMessage(record, field) 来确定每个单元格的校验状态和帮助信息。
   • 在 <a-form-item> 中通过 :validate-status 和 :help 属性绑定这些函数的返回值，实现了实时显示校验状态和帮助信息的功能。
   • 校验函数根据特定的规则判断输入值是否合法，例如判断输入是否为空等。

三、开发流程与关键步骤

1. 定义表格数据 dataSource 和列定义 columns。

2. 在表格模板中，使用 slot 来定义可编辑单元格的内容，并通过 slot-scope 获取当前行数据、记录和索引。

3. 在 <a-form-item> 中使用 v-model 绑定到表格数据中的对应字段，并通过 @change 事件处理函数 handleCellChange(record, field) 来处理单元格值的变化。

4. 定义校验函数和帮助信息函数，根据表格数据中的记录和字段进行校验判断，并返回相应的状态和信息。

四、优势与应用场景

1. 优势：

   • 提供了直观的可编辑表格功能，方便用户在表格中直接修改数据。
   • 校验功能可以及时反馈用户输入的合法性，提高数据的准确性和完整性。
   • 基于成熟的 Ant Design Vue 和 Vue 框架，具有良好的稳定性和可扩展性。

2. 应用场景：

   • 适用于需要用户在表格中进行数据编辑和输入的管理系统，如数据录入、数据修改等场景。
   • 可以根据具体业务需求定制校验规则，满足不同的数据验证要求。

以下是具体样例

第一步：编写一个demo的可编辑table页面

    <template>
        <div>
            <a-table :data-source="dataSource" :columns="columns">
                <template slot="name" slot-scope="text, record, index">
                    <a-form-item :validate-status="getValidateStatus(record, 'name')"
                        :help="getHelpMessage(record, 'name')">
                        <a-input v-if="record.editable" style="margin: -5px 0" v-model="record.name"
                            @change="(e) => handleCellChange(e.target.value, record, 'name')" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </a-form-item>
                </template>
                <template slot="age" slot-scope="text, record, index">
                    <a-form-item :validate-status="getValidateStatus(record, 'age')" :help="getHelpMessage(record, 'age')">
                        <a-input-number v-if="record.editable" v-model="record.age" @change="handleCellChange(record, 'age')" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </a-form-item>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                    <div class="editable-row-operations">
                        <span v-if="record.editable">
                            <a @click="() => save(record.key)">保存</a>
                            <!-- <a-popconfirm okText="确定" cancelText="取消" title="确认取消吗?" @confirm="() => cancel(record.key)"> -->
                                <a style="margin-left: 10px" @click="() => cancel(record.key)">取消</a>
                            <!-- </a-popconfirm> -->
                        </span>
                        <span v-else>
                            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                    </span>
                </div>
            </template>
        </a-table>
        
        </div>
    </template>
    
<script>
export default {
    name: "projectDetail",
    components: {},
    data() {
        return {
            columns: [
                {
                    title: "姓名",
                    key: "name",
                    dataIndex: "name",
                    slots: { title: "customTitle" },
                    scopedSlots: { customRender: "name" },
                },
                {
                    title: "年龄",
                    key: "age",
                    dataIndex: "age",
                    slots: { title: "customTitle" },
                    scopedSlots: { customRender: "age" },
                },
                {
                    title: "操作",
                    key: "operation",
                    scopedSlots: { customRender: "operation" },
                },
            ],
            dataSource: [
                { key: "001", name: "张三", age: 18 },
                { key: "002", name: "李四", age: 22 },
            ],
            editingKey: '',
            cacheData: [],
        };
    },
    created() { 
        //缓存原始数据，方便在取消操作时回显原始数据
        this.cacheData = this.dataSource.map(item => ({ ...item }))
    },
    computed: {
    },
    watch: {
    },
    methods: {
        handleCellChange(value, record, field) {
            // 校验行数据
            if (!this.isRowValid(record)) {
                // 行数据无效，显示错误提示
                this.$message.error("请填写必要的信息");
            }
            const newData = [...this.dataSource];
            const target = newData.find((item) => record.key === item.key);
            if (target) {
                target[field] = value;
                this.dataSource = newData;
            }
        },
        isRowValid(record) {
            console.log(record.name && record.age)
            // 根据你的业务逻辑进行行数据的校验
            if (record.name && record.age) {
                return true
            }
            return false;
        },
        getValidateStatus(record, field) {
            if (!this.isCellValid(record, field)) return "error";
            return "";
        },
        getHelpMessage(record, field) {
            if (!this.isCellValid(record, field)) {
                if (field === 'name') {
                    return "姓名不能为空"
                }
                return "请输入有效的数据";
            }
            return "";
        },
        isCellValid(record, field) {
            // 根据你的业务逻辑进行单元格数据的校验
            if (field === "name") {
                return record.name
            } else if (field === "age") {
                return record.age && record.age >= 18 && record.age <= 99;
            }
            return true;
        },
        // 编辑表格记录
        edit(key) {
            const newData = [...this.dataSource];
            const target = newData.find((item) => key === item.key);
            this.editingKey = key;
            console.log('edit', target)
            if (target) {
                target.editable = true;
                this.dataSource = newData;
            }
        },
        //保存表格行记录
        save(key) {
            const newData = [...this.dataSource];
            const newCacheData = [...this.cacheData];
            console.log(newData)
            const target = newData.find((item) => key === item.key);
            if (target && target.name) {
                delete target.editable;
                this.dataSource = newData;
                Object.assign(newCacheData.find((item) => key === item.key), target);
            }
            this.editingKey = "";
        },
        cancel(key) {
            const newData = [...this.dataSource];
            const target = newData.find((item) => key === item.key);
            this.editingKey = "";
            if (target) {
                console.log('cancal',this.cacheData)
                Object.assign(target, this.cacheData.find(item => key === item.key));
                delete target.editable;
                console.log(newData)
                this.dataSource = newData;
            }
        },
    },
    beforeCreate() { },
    mounted() {
        // console.log("@@",this)
    },
    beforeDestroy() {
        console.log("执行了当前组件的销毁机制");
    },
};
</script>

第二步： 效果

1. 点击编辑效果

2. 编辑行记录时，如果table-Cell(单元格)此时为空或者行记录有字段为空,则可以在自定义字段校验规则函数中设置自定义校验。