vue element-UI table 中 加入select 框结合

image.png

vue 部分代码展示

关键点在于el-select中得v-model部分 需要使用scope.row[scope.column.property]来绑定某一个单元格，否则按网上大部分文章中使用scope.row.xxx会让整行的下拉都随某一个下拉值的改变而改变

<el-table
          class="clearfix"
          :key="tableKey"
          border
          fit
          :data="list"
          highlight-current-row
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ids"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="列名">
          </el-table-column>
          <el-table-column
            prop="value1"
            label="数据项1">
          </el-table-column>
          <el-table-column
            prop=""
            label="数据项2">
          </el-table-column>
          <el-table-column
            prop=""
            label="选择项1">
            <template slot-scope="scope">
              <el-select v-model="scope.row[scope.column.select1]" placeholder="请选择：">
                <el-option
                  v-for="item in scope.row.select1"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="select2"
            label="选择项2">
            <template slot-scope="scope">
              <el-select v-model="scope.row[scope.row.select2]" placeholder="请选择模板：">
                <el-option
                  v-for="item in scope.row.select2"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>

数据结构

image.png