element ui table嵌套多个select，包含动态列

先来看一下效果图，前面的部分是普通列，“工艺”、“模面”、“结构”三列是查询得到得动态列

 vue部分代码

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

<el-table
      :data="planTemplateList"
      border
      ref="table"
      id="table"
      :height="tableHeight"
      size="small"
      highlight-current-row
    >
      <!-- moldId -->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="makeCode"
        label="制件图号"
        show-overflow-tooltip
        align="center"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="makeName"
        label="制件名称"
        show-overflow-tooltip
        align="center"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="moldCode"
        label="模具制号"
        show-overflow-tooltip
        align="center"
        sortable
        width="110"
      >
      </el-table-column>
      <el-table-column
        prop="standSet"
        label="标准套(C)"
        show-overflow-tooltip
        align="center"
        sortable
        width="110"
      >
      </el-table-column>
      <el-table-column v-for="(col, index) in groupColums"
        :prop="col.prop"
        :label="col.label"
        :key="col.prop + index"
        show-overflow-tooltip
        align="center"
        sortable
        width="150"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row[scope.column.property]" @change="(value)=> 
               {changeCell(value, scope.row, col.prop)}" clearable filterable>
            <el-option
              v-for="item in designAssignDeptList"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column v-for="(col, index) in groupColums"
        :prop="col.prop"
        :label="col.label"
        :key="index"
        align="center"
      >
        <el-table-column v-for="(itemCol, itemIndex) in planTemplateColums"
          v-if="itemCol.parentKey === col.prop"
          :prop="itemCol.prop"
          :label="itemCol.label"
          :key="itemIndex"
          show-overflow-tooltip
          align="center"
          sortable
          width="150"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row[scope.column.property]" clearable filterable>
              <el-option
                v-for="item in designAssignDeptList"
                :key="item.key"
                :label="item.value"
                :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="80"
      >
        <template slot-scope="scope">
          <el-button type="danger" @click="clearRow(scope.row)" plain icon="el-icon-        
             delete" circle size="mini" title="清空"></el-button>
        </template>
      </el-table-column>
    </el-table>

js部分代码

export default {
  name: 'distributeDept',
  data () {
    return {
      planTemplateList: [], // 计划模板列表
      groupColums: [], // 工序组表头
      designAssignDeptList: [] // 设计任务分配部门下拉
    }
  },
  created () {
    this.getGroupTitle()
    this.getDesignAssignDeptList()
    this.getList()
  },
  mounted () {

  },
  computed: {

  },
  methods: {

    async getGroupTitle () {
      // 获取工序分组动态列头
      const res = await this.$http.request({ url: this.$api.baseConfig.getDictDataList,
        params: {
          dictType: 'pln_progress_group'
        },
        method: 'get' })
      const data = res.data
      if (data.code === 0) {
        this.groupColums.splice(0, this.groupColums.length)
        for (var i = 0; i < data.jsonObject.length; i++) {
          this.groupColums.push({
            label: data.jsonObject[i].dictLabel,
            prop: String(data.jsonObject[i].dictValue)
          })
        }
      }
    },

    async getDesignAssignDeptList () {
      // 获取设计任务分配部门下拉

      const res = await this.$http.request({
        url: this.$api.pln.getDesignAssignDeptList,
        params: {

        },
        method: 'get'
      })
      const data = res.data
      if (data.code === 0) {
        this.designAssignDeptList = data.jsonObject
      }
    },

    async getList () {
      // 获取工序分配列表
      this.search_loading = true

      const res = await this.$http.request({
        url: this.$api.pln.getDistributeDeptList,
        params: {
          projectIds: this.idString
        },
        method: 'get'
      })
      const data = res.data
      if (data.code === 0) {
        this.search_loading = false
        const results = []
        let moldId = null
        let obj = null
        for (let i = 0; i < data.jsonObject.length; i++) {
          if (moldId !== data.jsonObject[i].moldId) {
            // 新增一行
            obj = {
              makeCode: data.jsonObject[i].makeCode,
              makeName: data.jsonObject[i].makeName,
              moldId: data.jsonObject[i].moldId,
              moldCode: data.jsonObject[i].moldCode,
              standSet: data.jsonObject[i].standSet
            }
            this.$set(obj, data.jsonObject[i].prop, data.jsonObject[i].value)
            moldId = data.jsonObject[i].moldId
            results.push(obj)
          } else {
            // 合并列
            this.$set(obj, data.jsonObject[i].prop, data.jsonObject[i].value)
          }
        }
        this.planTemplateList = results
      }
    },

    changeCell (value, row, prop) {
      this.planTemplateColums.forEach(item => {
        if (item.parentKey === prop) {
          // 找到parentKey是prop的列 获取列的数组 将row中的这些列改值
          this.$set(row, item.prop, value)
        }
      })
    },

    clearRow (row) {
      // 清空当前行
      this.groupColums.forEach(item => {
        this.$set(row, item.prop, null)
      })
      this.planTemplateColums.forEach(item => {
        this.$set(row, item.prop, null)
      })
    }

  }
}