el-table表格樹懶加載load

 

在點擊展開小標時動態插入數據：

 

 

 

在子組件中：

 

 這里是把 加載函數 load props出去，

 

然后在父組件中，寫 load方法 ：

 

 代碼部分：

 

父組件：

 <!-- *******第四層列表(收入統計)********* -->
    <el-dialog :title="customerNo" :visible.sync="outerVisible2" class="dialog_small">
      <dialogTable4 :tableData="tableData" :load="load"></dialogTable4>
      <el-pagination class="table_pagination" background @current-change="handleCurrentChange2" :current-page.sync="page1" :page-size="pageSize1" layout="->,total,prev, pager, next, jumper" :total="total1">
      </el-pagination>
    </el-dialog>

// ---列表收縮-----------------------------------------
    load (tree, treeNode, resolve) {
      const params = {
        areaName: this.name,
        customerNo: this.customerNo,
        endTime: this.time1,
        startTime: this.time0,
        flag: this.flag,
        orgName: this.orgName,
        temp: tree.circuitId
      }
      getBillIncomeDetailDataDetail(params).then((result) => {
        resolve(result.data)
      }).catch(() => { })
    }

 

子組件：

<el-table class="dialog_table4" :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName" ref="refsTable4" row-key="id" :default-expand-all="false" lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="asdasdsad" label="" width="50" align="center">
    </el-table-column>
    <el-table-column prop="status" label="Status" width="65" show-overflow-tooltip align="center">
      <template slot-scope="scope">
        <i v-if="scope.row.status == '1'" class="el-icon-close"></i>
        <i v-else-if="scope.row.status == '2'" class="el-icon-top"></i>
        <i v-else-if="scope.row.status == '3'" class="el-icon-check"></i>
        <i v-else-if="scope.row.status == '4'" class="el-icon-bottom"></i>
        <i v-else class="el-icon-minus"></i>
      </template>
    </el-table-column>
</el-table>

隨便加一行，單放 展開收縮的小標，較好看些