Ant Design Vue 框架的a-table嵌套a-form-model达到验证效果
注开发环境vue2,ant版本1.7.8需要先了解表头和内容自定义插槽链接地址https。
·
注:开发环境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>
更多推荐
已为社区贡献1条内容
所有评论(0)