element动态form实现
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
- 列是根据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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)