效果如下：
image.png
思路
- 定义数据类型
data() {
return {
// 用于校验表格的form
tableForm: {
items: []
},
//字段表格数据
modelFieldList: [],
// 表单校验
rules: {
mid: [
{ required: true, message: "模型ID不能为空", trigger: "change" }
],
dataAttr: [
{ required: true, message: "数据属性不能为空", trigger: "change" }
],
showName: [
{ required: true, message: "显示名称不能为空", trigger: "blur" }
],
fieldType: [
{ required: true, message: "数据类型不能为空", trigger: "change" }
],
enabled: [
{ required: true, message: "启用不能为空", trigger: "blur" }
],
defaults: [
{ required: true, message: "默认值不能为空", trigger: "blur" }
],
uniqueKey: [
{ required: true, message: "唯一键不能为空", trigger: "blur" }
],
filtered: [
{ required: true, message: "筛选不能为空", trigger: "blur" }
],
}
};
},
- 在 table 的外层加一个 form 表单，定义 ref 和 model 属性,再 el-table-column 里面加上 el-form-item 标签，
重点就是指定 prop 属性，还有 rules 属性。
prop / rules 属性示例:
<el-form-item :prop="'items.' + scope.$index + '.dataAttr'" :rules="rules.dataAttr" :inline-message="true">
<el-select v-model="scope.row.dataAttr" placeholder="请选择数据属性" style="width: 120px;">
<el-option v-for="dict in dict.type.warn_data_attr" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form ref="tableForm" :model="tableForm">
<el-table v-loading="loading" :data="modelFieldList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键ID" align="center" prop="id" v-if="true" />
<el-table-column label="模型ID" align="center" prop="mid" v-if="false" />
<el-table-column label="数据属性" align="center" width="140px" prop="dataAttr">
<template slot-scope="scope">
<el-form-item :prop="'items.' + scope.$index + '.dataAttr'" :rules="rules.dataAttr" :inline-message="true">
<el-select v-model="scope.row.dataAttr" placeholder="请选择数据属性" style="width: 120px;">
<el-option v-for="dict in dict.type.warn_data_attr" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="显示名称" width="140px" align="center" prop="showName">
<template slot-scope="scope">
<el-form-item class="table_item" :inline-message="true" :rules="rules.showName" :prop="'items.' + scope.$index + '.showName'">
<el-input style="width:120px" v-model="scope.row.showName" placeholder="请输入内容"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数据类型" width="140px" align="center" prop="fieldType">
<template slot-scope="scope">
<el-form-item :prop="'items.' + scope.$index + '.fieldType'" :rules="rules.fieldType" :inline-message="true">
<el-select v-model="scope.row.fieldType" placeholder="请选择数据类型">
<el-option v-for="dict in dict.type.dc_datatype" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="启用" align="center" prop="enabled">
<template slot-scope="scope">
<el-form-item class="table_item" :inline-message="true" :rules="rules.enabled"
:prop="'items.' + scope.$index + '.enabled'">
<el-checkbox v-model="scope.row.enabled"></el-checkbox>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="唯一键" align="center" prop="uniqueKey">
<template slot-scope="scope">
<el-form-item class="table_item" :inline-message="true" :rules="rules.uniqueKey"
:prop="'items.' + scope.$index + '.uniqueKey'">
<el-checkbox v-model="scope.row.uniqueKey"></el-checkbox>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="筛选" align="center" prop="filtered">
<template slot-scope="scope">
<el-form-item class="table_item" :inline-message="true" :rules="rules.filtered"
:prop="'items.' + scope.$index + '.filtered'">
<el-checkbox v-model="scope.row.filtered"></el-checkbox>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
- 校验form 表单
校验form 表单之前，一定要保证 tableForm.items 的数据和 modelFieldList 是一至的，也就是说，在获取 到modelFieldList 的时候，需要把同样的数据，赋值到 tableForm.items 中
/** 获取字段列表 */
getList() {
this.loading = true;
listModelField(this.queryParams).then(response => {
this.modelFieldList = response.rows;
this.tableForm.items = response.rows; // 用于校验
this.total = response.total;
this.loading = false;
});
},
/*
添加新对象
*/
addField(){
const item = {
mid: 0,
orderid: 100,
enabled: true,
uniqueKey: false,
filtered: false
}
this.modelFieldList.push(item)
this.tableForm.items.push(item) // 用于校验
}
,
/** 保存对象 */
handleUpdate(row) {
# 进行表单校验
this.$refs.tableForm.validate(valid => {
if (valid) {
saveEntities()
}
})
},
