el-element中el-table表格嵌套el-select实现动态选择对应值功能

<el-table-column label="文档类别" prop="categoryName">
  <template slot-scope="scope">
    <el-select
      :ref="'categoryName' + scope.$index"
      v-model="tableData[scope.$index]['categoryName']"
      placeholder="请选择文档类别"
      clearable
    >
      <el-option :value="tableData[scope.$index]['categoryName']" style="height: auto">
        <el-tree
          :ref="'categoryNameTree' + scope.$index"
          :data="typeList"
          node-key="id"
          :props="typeTreeProps"
          @node-click="getTypeList(scope.$index)"
        >
          <span slot-scope="{ node }">{{ node.label }}</span>
        </el-tree>
      </el-option>
    </el-select>
  </template>
</el-table-column>

data() {
   return {
     tableData: []  // 接口返回的数据，:data绑定在el-table中 
     typeList: [], // 接口返回的数据，展现在el-option中，用el-tree包裹
     typeTreeProps: {
       children: 'children',
       label: 'name'
     },
     categoryName: ''
   }
 }

getTypeList(index) {
   // .getCurrentKey()获取到当前要选择节点的key值
   // 使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
  const nodeId = this.$refs['categoryNameTree' + index].getCurrentKey()
   // .getNode(nodeId) 根据 data 或者 key 拿到 Tree 组件中的 node
  const node = this.$refs['categoryNameTree' + index].getNode(nodeId)
   // 根据index给当前元素的categoryName参数赋值
  this.$set(this.tableData[index], 'categoryName', node.label)
  this.$set(this.tableData[index], 'categoryNo', node.data.docTypeNo)
   // 此时页面上已经可以动态选择
   // 这一步是通过判断当前元素的v-model是否有值来控制el-option是否隐藏
  if (this.tableData[index].categoryName) {
     // .blur()用来隐藏当前展开的下拉选择框
    this.$refs['categoryName' + index].blur()
  }
},