el-form放el-table里面 表单校验必填提示变成batchList.${scope.$index}.bq_price
时间: 2024-10-13 18:05:59 浏览: 38
在Vue.js中,`el-form`通常用于表单验证,而`el-table`用于数据展示。当你将一个`el-form`放在`el-table`的行(`row`)里,如果某列设置了必填规则,表单提交前会检查该字段是否为空。当你使用模板字符串`${scope.$index}`动态绑定每个表格行的数据时,比如价格(bq_price)字段需要验证,可以在验证规则中引用这个动态路径。
例如,在`el-form-item`的`rules`属性中,你可以这样设置必填提示:
```html
<template>
<el-form :model="batchList">
<el-table-column prop="bq_price" label="价格" v-for="(item, index) in batchList" :key="index">
<template slot-scope="scope">
<el-form-item :label="$t('必填') + ':'" :prop="'batchList.' + index + '.bq_price'">
<el-input v-model="scope.row.bq_price"></el-input>
<el-form-item-error @show="errorShow(index)" :show="{ valid: false }"></el-form-item-error>
</el-form-item>
</template>
</el-table-column>
</el-form>
</template>
<script>
export default {
data() {
return {
batchList: [
{ bq_price: '' },
// 更多数据...
]
};
},
methods: {
errorShow(index) {
this.$refs.form.validateField('batchList.' + index + '.bq_price', (valid) => {
if (!valid) {
this.$message.error('batchList.' + index + '.bq_price 是必填项');
}
});
}
}
};
</script>
```
在这里,当某个`bq_price`字段为空时,就会显示相应的必填提示,提示信息就是`batchList.${scope.$index}.bq_price`。
阅读全文