element表单嵌套表格，多层嵌套校验

最新推荐文章于 2024-05-10 16:40:51 发布

～哇～

最新推荐文章于 2024-05-10 16:40:51 发布

阅读量348

点赞数

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_45195407/article/details/131948513

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-form ref="form"  :model="form" :rules="rules" size="small" >
            <el-table  :data="form.infoList" :border="true">
                <el-table-column align="center" label="参数名" prop="cName" width="200px"></el-table-column>
    
                <el-table-column align="center" label="参数值">
                  <template slot-scope="scope">
                    <el-row>
                        <template v-for="(item,i) in scope.row.data">
                            <el-col :span="10">
                                <el-form-item :prop="'infoList.'+scope.$index+'.data.'+i+'.age'" :rules="rules.age" label-width="0">
                                    <el-input v-model="item.age" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item :prop="'infoList.'+scope.$index+'.data.'+i+'.name'" :rules="rules.name" label-width="0">
                                    <el-input v-model="item.name" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-button v-if="i == 0" type="text" @click="add(scope.row.data)">新增</el-button>
                                <el-button v-if="i !== 0" type="text" style="color:red" @click="deleteData(scope.row.data, scope.$index, i)">移除</el-button>
                            </el-col>
                        </template>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
        </el-form>
        <el-button type="primary" @click="submit">确定</el-button>
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    form:{
                        infoList:[
                            {
                                cName:'111',
                                data:[{age:'',name:''},{age:'',name:''},{age:'',name:''}]
                            },
                            {
                                cName:'111',
                                data:[]
                            }
                        ],
                    },
                    rules:{
                        "age":[{required: true, message: '请输入',trigger: ['blur','change'] }],
                    },
                }
            },
            methods:{
                add(data){
                    data.push({age:'',name:''});
                },
                deleteData(data, index, i){
                    console.log('------------------')
                    // this.form.infoList[index].data.splice(i, 1)
                    data.splice(i, 1)
                },
                submit(){
                    this.$refs["form"].validate(valid => {
                        if (valid) {
                            console.log('校验通过')
                        }
                    })
                }
            }

        })
    </script>
</body>
</html>