【表格嵌套选择器】elementul中el-table表格嵌套el-select方法,循环多个el-select获取对应值

很多人遇到表格中嵌套select的情况,这种时候因为表格很多行,就会有很多个选择器,会出现点一个选择器其他的选择器都选中了同一个角标的值。所以我们要做到区分单独开来。

效果图

在这里插入图片描述

拿到的值格式

这样的,直接就放在了tabledata内。
在这里插入图片描述
在这里插入图片描述

代码

html
重点!!!!v-model="scope.row[scope.column.property]"这一句话

          <el-table :data="tableData" style="width: 100%" size="mini">
            <el-table-column prop="A" label="名称"> </el-table-column>
            <el-table-column prop="B" label="开始时间"> </el-table-column>
            <el-table-column prop="C" label="结束时间"> </el-table-column>
            <el-table-column prop="D" label="操作区分">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row[scope.column.property]"
                  placeholder="操作标记"
                  size="mini"
                >
                  <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="E" label="操作分类">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row[scope.column.property]"
                  placeholder="操作分类"
                  size="mini"
                >
                  <el-option
                    v-for="(item,index) in options2"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="F" label="归类">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row[scope.column.property]"
                  placeholder="归类"
                  size="mini"
                >
                  <el-option
                    v-for="(item,index) in options3"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>

data:
获取的值会存在对应的tabledata内。如果想反选就直接在tabledata改值就行,比如给D内写值,那么图表上的select就会默认选中

      tableData: [
        {
    
    
          A: "作业分析动作1",
          B: "16.44",
          C: "31.29",
          D:'',
          E:'',
          F:''
        },
        {
    
    
          A: "作业分析动作2",
          B: "34.24",
          C: "43.11",
          D:'',
          E:'',
          F:''
        },
        {
    
    
          A: "作业分析动作3",
          B: "48.64",
          C: "70.26",
          D:'',
          E:'',
          F:''
        },
        {
    
    
          A: "作业分析动作4",
          B: "76.15",
          C: "104.25",
          D:'',
          E:'',
          F:''
        },
      ],

猜你喜欢

转载自blog.csdn.net/seeeeeeeeeee/article/details/121973090