element UI form嵌套table，动态列渲染数据

最新推荐文章于 2024-05-24 11:37:25 发布

amy1019

最新推荐文章于 2024-05-24 11:37:25 发布

阅读量415

点赞数

文章标签：开发语言 javascript vue.js 前端 elementui

本文链接：https://blog.csdn.net/amy1019/article/details/129853846

版权

工作中遇到form嵌套多层table,并渲染table的动态列

data中声明的结构

form: {
  tableList: [
     {
         id: 0,
         name: '',
         type: '', 
         tableListColList: [//动态列数据
           {
             id: 0,
             startDate: formatDate(new Date(), 'YYYY-MM-DD'),
             endDate: formatDate(new Date(), 'YYYY-MM-DD'),
             count: '', //数量
             money: '', //金额
            },
         ],
      },
   ],
},

html结构

 <el-form ref="formTable" :rules="formRules" :model="form" size="mini" :inline="true">
    <el-table 
        v-loading="!isTableShow" 
        element-loading-text="拼命加载中..." 
        element-loading-spinner="el-icon-loading"
        border 
        :data="form.tableList" 
        style="width: 100%">
      <el-table-column fixed prop="name" label="意向产品" width="150"></el-table-column>
      <el-table-column fixed label="预计收入金额" width="120">
          <template slot-scope="scope">
            <div>金额(万元)</div>
            <div>占比(%)</div>
          </template>
      </el-table-column>
      <!-- 动态列 -->
      <div v-if="isTableShow">
          <el-table-column
            v-for="(item, index) in form.tableList[0].tableListColList"
            :key="index"
            width="150"
          >
            <template slot="header" slot-scope="scope">
              <div slot="content">{{ item.endDate }}</div>
            </template>
            <template slot-scope="scope">
              <!-- ----{{scope.$index}}----{{index}} -->
              <!-- {{scope.row.tableListColList[index].money}}----{{scope.row.tableListColList[index].count}} -->
              <div>
                <el-form-item
                  label=" "
                  :prop="
                    'tableList.' +
                    scope.$index +
                    '.tableListColList.' +
                    index +
                    '.money'
                  "
                  :rules="formRules.money"
                >
                  <el-input-number
                    v-model="scope.row.tableListColList[index].money"
                    :controls="false"
                    @change="
                      handleChangeAmount(scope, scope.row.tableListColList[index].money, index)
                    "
                  ></el-input-number>
                </el-form-item>
              </div>
              <div>
                <el-form-item
                  label=" "
                  :prop="
                    'tableList.' + scope.$index + '.tableListColList.' + index + '.count'
                  "
                  :rules="formRules.count"
                >
                  <el-input-number
                    v-model="scope.row.tableListColList[index].count"
                    :max="100"
                    :precision="2"
                    :controls="false"
                    @change="handleChangeRatio(scope, scope.row.tableListColList[index].count, index)"
                  ></el-input-number>
                </el-form-item>
              </div>
            </template>
          </el-table-column>
        </div>
      </el-table>
    </el-form>

rules规则

formRules: {
   count: [{ validator: this.checkNum }, { required: true, message: '请输入占比' }],
   money: [{ required: true, validator: this.checkMount }],
},