vue表格嵌套表格校验

最新推荐文章于 2024-09-09 13:30:05 发布

ghx123456ghx

最新推荐文章于 2024-09-09 13:30:05 发布

阅读量524

点赞数

文章标签： vue 表格嵌套表格校验

本文链接：https://blog.youkuaiyun.com/ghx123456ghx/article/details/124693984

版权

这篇博客详细介绍了如何在前端使用`el-table-column`组件来创建表格，并结合`asp-user`组件实现单位负责人字段的选择功能。内容涉及到动态设置表单规则、用户选择验证以及在数据只读情况下禁用选择功能。通过`slot-scope`进行模板定义，确保了用户选择的交互性和数据验证的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table-column label="单位负责人" prop="governancePower" width="118">
             <!--     <template slot-scope="scope2">
                    <asp-user v-model="scope2.row.cmpResponseId" :isRequire="true" :multi="false" v-on:changeGetUserName="cmResponseChange(scope2.row, ...arguments)" :parentUserNames="scope2.row.cmpResponseName" ></asp-user>
                  </template>-->

                  <template slot-scope="scope2">
                    <el-form-item
                      label-width="0px"
                      style="margin-bottom: 0px"
                      :prop="'setVoList.' +scope.$index+ '.projects.' + scope2.$index + '.cmpResponseId'"
                      :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                      <asp-user v-model="form.setVoList[scope.$index].projects[scope2.$index].cmpResponseId" :multi="false" v-on:changeGetUserName="cmResponseChange(scope2.row, ...arguments)" :parentUserNames="scope2.row.cmpResponseName" :disabled="dataReadonly"></asp-user>
                    </el-form-item>
                  </template>
                </el-table-column>