当前位置 博文首页 > q1424966670的博客:element动态form实现
- ?列是根据json数组生成的
- 点击编辑,会根据行数据生成对应的表单
- rules规则是遍历生成,目前是所有列全必填
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="item in formList" :prop="item.prop" :key="item.prop" :label="item.label"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span class="editrow" @click="editrow(scope.row)">编辑</span>
</template>
</el-table-column>
</el-table>
<el-dialog title="编辑" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<el-form :model="addOrUpdateForm" ref="addOrUpdateForm" label-width="100px" class="demo-dynamic" :rules="rules">
<el-form-item v-for="(item, index) in formList" :label="item.label" :key="index" :prop="item.prop">
<el-input v-model="addOrUpdateForm[item.prop]" ></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('addOrUpdateForm')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
//列头
formList: [
{label: "表单名1",prop: "form01"},
{label: "表单名2",prop: "form02"},
{label: "表单名3",prop: "form03"},
{label: "表单名4",prop: "form04"},
{label: "表单名5",prop: "form05"},
],
//表格内容
tableData: [
{"form01": "11","form02": "12","form03": "13","form04": "14"},
{"form01": "21","form02": "22","form03": "23","form04": "24"},
{"form01": "31","form02": "32","form03": "33","form04": "34"},
{"form01": "41","form02": "42","form03": "43","form04": "44"}
],
rules: {
},
addOrUpdateForm: {
},
};
},
mounted(){
},
methods: {
editrow(row) {
this.rules = {};
this.formList.map(x=>{
this.rules[x.prop] = [{required: true,message: '请输入'+x.label,trigger: 'blur'}]
});
this.addOrUpdateForm = Object.assign({},row)
this.dialogVisible = true;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
.demo-dynamic {
width: 500px;
padding: 20px;
}
.editrow {
color: #409eff;
}
.el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
</style>
cs