zoukankan      html  css  js  c++  java
  • 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=" 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>

    随便加一行,单放 展开收缩的小标,较好看些

  • 相关阅读:
    TSQL--NESTED LOOPS JOIN
    TSQL--SORT MERGE JOIN
    TSQL--HASH JOIN
    Backup--备份相关的信息查看及小技巧
    java后台json如何传递到jsp中解析
    大数据资源
    oracle sql生成日历表
    easyUI中onLoadSuccess方法获取多个对象
    征信用户数据分析
    JS优秀资源站点收集
  • 原文地址:https://www.cnblogs.com/listen9436/p/11971026.html
Copyright © 2011-2022 走看看