Ant Design Vue 框架的a-table嵌套a-form-model达到验证效果
注：开发环境vue2，ant版本1.7.8
需要先了解表头和内容自定义插槽
https://blog.csdn.net/weixin_41620505/article/details/125886643
需求：动态添加item并校验输入框
1、script中创建表头
<script> export default { data() { return { // 表单参数 form: { modelName: '', modelNote: '', editList: [{ value1: 0, value2: 10, level: '', note: '', market: '' }] }, rules: { modelName: Validate.requiredRules('名称', ['change', 'blur']), modelNote: Validate.requiredRules('说明', ['change', 'blur']), level: [...Validate.requiredRules('等级', ['change', 'blur']), { validator: (rule, value, callback) => { let findItem = this.form.editList.filter(item => item.level === value) if (findItem.length > 1) { callback(new Error('等级重复')) } else { callback() } }, trigger: ['change', 'blur'] }], }, columns: [ { dataIndex: 'value', slots: { title: 'titleValue' },//表头插槽 scopedSlots: { customRender: 'value' },//表格内容插槽 align: 'center', width: 240, { dataIndex: 'level', scopedSlots: { customRender: 'level' }, slots: { title: 'titleLevel' }, align: 'center' }, { dataIndex: 'note', scopedSlots: { customRender: 'note' }, slots: { title: 'titleNote' }, align: 'center' }, { title: '备注', dataIndex: 'market', scopedSlots: { customRender: 'market' }, align: 'center' }, { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, align: 'center', width: 50 } ] } } } </script>
2、在template中引用
<template> <div> <a-form-model :colon="false" class="form" ref="form" :model="form" :rules="rules" > <a-table :rowKey=" (record, index) => { return index }" :columns="columns" :data-source="form.editList" :pagination="false"> <!-- 自定义表头--> <span slot="titleValue" class="form-table-heard"> 分值区间 </span> <span slot="titleLevel" class="form-table-heard"> 评价等级 </span> <span slot="titleNote" class="form-table-heard"> 评价说明 </span> <!--自定义内容--> <span slot="value" slot-scope="text, record,index"> <a-form-model-item class="item" :prop="'editList.'+index+'.value1'" :rules="rules.value1"> <a-input-number class="item" v-model="record.value1" size="small" :max="100" :min="0" :formatter="value => `${Number.parseInt(value||0).toFixed(0)}`" /> </a-form-model-item> <span class="item-line"/> <a-form-model-item class="item" :prop="'editList.'+index+'.value2'" :rules="rules.value2"> <a-input-number class="item" :max="100" :min="0" v-model="record.value2" size="small" :formatter="value => `${Number.parseInt(value||0).toFixed(0)}`" /> </a-form-model-item> </span> <template slot="level" slot-scope="text, record,index"> <a-form-model-item :prop="'editList.'+index+'.level'" :rules="rules.level"> <a-input v-model="record.level" placeholder="请输入" :disabled="disabled" size="small"/> </a-form-model-item> </template> <template slot="note" slot-scope="text, record,index"> <a-form-model-item :prop="'editList.'+index+'.note'" :rules="rules.note"> <a-input v-model="record.note" placeholder="请输入" :disabled="disabled" size="small"/> </a-form-model-item> </template> <template slot="market" slot-scope="text, record,index"> <a-form-model-item> <a-input v-model="record.market" placeholder="请输入" :disabled="disabled" size="small"/> </a-form-model-item> </template> <span slot="operation" slot-scope="text, record,index"> <a-button name="删除" btnType="primary" :isDanger="true" @click="handleDelete(index)"/> </span> </a-table> </a-form-model> </div> </template> <style lang="less" scoped> .form-table-heard:before { content: '*'; color: red; } </style>
