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

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

 vue部分代码

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

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)
      })
    }

  }
}