vue+elementui 简单的表格套表单校验分享

最新推荐文章于 2024-09-14 09:50:15 发布

一枚前端小卡拉米

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量149

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/WebZichen/article/details/140683701

版权

模板

<el-form ref="ruleForm" :model="formData" label-width="200px">
  <el-table :data="formData.gridData" height="500" border>
    <el-table-column property="sellerName" label="店铺名称" min-width="250"></el-table-column>
    <el-table-column label="选择退回地址" min-width="260">
      <template slot-scope="scope">
        <div>
          <el-form-item :prop="'gridData.' + scope.$index + '.returnWarehouseId'" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
            <el-select v-model="scope.row.returnWarehouseId" placeholder="请选择" style="width: 100%;">
              <el-option v-for="innerItem in retreatNameList" :key="innerItem.id" :label="innerItem.returnWarehouseName" :value="innerItem.id"> </el-option>
            </el-select>
          </el-form-item>
        </div>
      </template>
    </el-table-column>
  </el-table>
</el-form>

data数据

formData: {
  gridData: []
},

更深层次的模板prop绑定

:prop="`tableData.${scope.$index}.detailList[${index}].returnWarehouseIds`"

更深层次的模板data数据

formData: {
 tableData: [
    {
      senderWarehouseName: 'A仓库',
      method: '',
      detailList: [
        {
          id: '',
          returnWarehouseIds: ''
        }
      ],
      originalWarehouseIds: ''
    }
 ]
},