element-ui el-table级联使用

element-ui el-table级联使用

在使用elementUI的时候，有时候会用到表格级联关联，如点击A，渲染B，再通过B渲染C；如下图所示：

其实使用的就是el-table中的current-change属性，这里记录下，

<el-col :span="6">
	<el-table ref="tableA" :resizable="false" :data="tableDataA" highlight-current-row @current-change="companyTableClk" :border="false">
	    <el-table-column :resizable="false" prop="tbrName" label="事业单位名称" min-width="180">
	        <template slot-scope="scope">
	            <div class="comp-title company-name-td">{{scope.$index + 1}} {{scope.row.name}}</div>
	        </template>
	    </el-table-column>
	</el-table>
</el-col>
<el-col :span="10">
	<el-table ref="tableB" :resizable="false" :data="tableDataB" highlight-current-row @current-change="twoTableClk" :border="false">
	    <el-table-column :resizable="false" prop="tbrName" label="事业单位名称" min-width="180">
	        <template slot-scope="scope">
	            <div class="comp-title company-name-td">{{scope.$index + 1}} {{scope.row.name}}</div>
	        </template>
	    </el-table-column>
	</el-table>
</el-col>
<el-col :span="8">
	<el-table ref="tableC" :resizable="false" :data="tableDataC" :border="false">
	    <el-table-column :resizable="false" prop="tbrName" label="事业单位名称" min-width="180">
	        <template slot-scope="scope">
	            <div class="comp-title company-name-td">{{scope.$index + 1}} {{scope.row.name}}</div>
	        </template>
	    </el-table-column>
	</el-table>
</el-col>

// 第一步获取A表格数据
async getDataAFn() {
	const res = await getDataA(obj)
	if (res.success) {
        this.tableDataA = res.data
        this.$nextTick(function () {
        	// 获取A表格数据后，高亮A的第一条数据，触发A表格的companyTableClk事件
            this.$refs.tableA.setCurrentRow(this.tableDataA[0])
        })
    }
}
// 单位表格点击方法 (第二步)
async companyTableClk(row) {
     const obj = {
         tbrId: row.id
     }
     const res = await getDataBFn(obj)
     if (res.success) {
         this.tableDataB= res.data
         // 高亮表格B的第一条数据，触发B表格的twoTableClk事件
         this.$refs.tableB.setCurrentRow(this.tableDataB[0])
     }

 },
 //  获取第三个表格数据
 async twoTableClk(row) {
      const obj = {
          psItemId: row.psId,
      }
      const res = await getDataCFn(obj)
      if (res.success) {
          this.tableDataC = res.data
      }
  },

---

这样就实现了联动，每一级的展示都依赖上一级传入的数据来展示；
这里的重点就是：
1.current-change事件
2.this.$refs.tableA.setCurrentRow(this.tableDataA[0])；设定选中某条数据，出发上面的current-change方法