记录-在 el-table 中嵌套 VueTreeselectel-table 嵌套 el-select + el-tr

el-table 嵌套 el-select + el-tree

最近的一个需求，需要在表格项中实现一个部门下拉多选框，一般的下拉多选框使用el-select嵌套el-tree即可，这个的难点在于每一行的所选数据要与该行的index对应上。最终的解决方案是在el-table中引入了 Vue-Treeselect | Vue-Treeselect 中文网 (vuetreeselect.cn))

第一步：引入Treeselect组件

<script>
// 引入Treeselect组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  }
</script>

第二步：组件引入表格

<el-table :data="teamTableData" :row-class-name="baoXiaoTableIndex" @selection-change="baoXiaoTableChange4"  border ref="teamRef" class="baoXiaoClass">
  <el-table-column type="selection" width="50" align="center" />
  <el-table-column label="序号" align="center" prop="index" width="50" />
  <el-table-column label="团建部门" prop="deptId" align="center" width="400">
    <template slot-scope="scope">
      <treeselect :multiple="true" append-to-body z-index="9999" :options="deptOption" :flat="false"  v-model="scope.row.deptId" placeholder="请选择团建部门" :normalizer="normalizer"  :disabled="baoXiaoDetail_jinYong" />
    </template>
    <!-- valueFormat="object"  @input="selectCgItem($event, scope.$index)" :limit="3" :limitText="count => `+${count}`" -->
  </el-table-column>
</el-table>