element 树形2级表格,设置默认选中

element 树形表格

注意:getRowKey一定要

<el-table
        ref="multipleTable1"
       :data="tableData"
        style="width: 100%"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :row-key="getRowKey"
         @expand-change="expandChange"
      >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table class="secondTable" :row-key="getRowKey" :ref="'child'+props.row.id"  :data="props.row.children" 
          @selection-change="handleSelectionChange($event, props.row.id)" style="width: 100%">
            <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column>
              <el-table-column prop="name" label="名称" show-overflow-tooltip width="200"></el-table-column>
              <el-table-column prop="type" label="类型" show-overflow-tooltip width="200"></el-table-column>
              <el-table-column prop="accuracy" label="精度" width="200"></el-table-column>
              <el-table-column prop="length" label="长度"show-overflow-tooltip width="200"></el-table-column>           
              <el-table-column prop="action" label="操作" show-overflow-tooltip>
              </el-table-column>
          </el-table>
        </template>
      </el-table-column>
        <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column> 
        <el-table-column prop="name" label="名称" show-overflow-tooltip width="200">
        </el-table-column>
         <el-table-column prop="type" label="显示类型" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="createBy" label="创建者" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="300"></el-table-column>
         <el-table-column prop="action" label="操作">
          </template>
         </el-table-column>
      </el-table>
 // 点击展开收起函数
    expandChange(row, expanded) {
      console.log('点击展开',expanded.length>0?'展开':'收起')
      if(expanded.length>0){
		const list = this.tableData
      console.log('list',list)
       if(list){
          this.$nextTick(() => {
              list.forEach((item,index) => {
                  this.$refs.multipleTable1.toggleRowSelection(this.tableData.find(tx => {
                      return tx.id === item.id
                  }), true)
                  if(item.children){
                    item.children.forEach(child => {
                      const refChild = 'child'+item.id
                      this.$refs[refChild].toggleRowSelection(this.tableData[index].children.find(tx => {
                          return tx.id === child.id
                      }), true)
                    })
                  }
              })
          })
        }
       },
 //选择分页
    getRowKey(row) {
      return row.id
    },

猜你喜欢

转载自blog.csdn.net/qq_26841153/article/details/126895060