element-ui tree樹形組件自定義實現可展開選擇表格

<div class="invoice-list">
<!-- 表頭的值,自己單獨寫的 -->
<ul class="invoice-header">
<li class="invoice-item">發票號</li>
<li class="invoice-item">訂單號</li>
<li class="invoice-item">發票金額</li>
<li class="invoice-item">開票日期</li>
<li class="invoice-item">收款方式</li>
<li class="invoice-item">狀態</li>
<li class="invoice-item">發票收款日期</li>
<li class="invoice-item">操作</li>
</ul>
<el-tree
:props="props"
:data="tableData"
show-checkbox
default-expand-all
ref="treeData"
@check-change="handleCheckChange">
<!-- 使用自定義,需要加slot-scope,返回兩個值,node是當前節點指定的對象
data是當前節點的數據 -->
<div class="custom-tree-node" slot-scope="{ node, data }">
<div class="total_info_box clearfix" v-if="data.span">
<span><i>對賬單號:</i> {{data.accountNo | isEmptyVal}}</span>
<span><i>對賬金額:</i> {{data.totalReconciledAmount | formatUSD}}</span>
<span><i>對賬日期:</i> {{data.confirmAccountDate | formatYMD}}</span>
</div>
<span v-else class="table_info_node">
<span class="table_info_item">{{data.invoiceNo}}</span>
<span class="table_info_item">{{data.orderNo}}</span>
<span class="table_info_item">{{data.totalAmountTax}}</span>
<span class="table_info_item">{{data.billingDate}}</span>
<span class="table_info_item">{{data.forCollection}}</span>
<span class="table_info_item">{{data.requestStatus}}</span>
<span class="table_info_item">{{data.receiptDate}}</span>
<span class="table_info_item"><el-button @click="toInvoiceDetail(data)">詳情</el-button></span>
</span>
</div>
</el-tree>
</div>

JS

data () {
    return {
      props: {
        label: 'accountNo', // 需要指定的節點渲染對象屬性
        children: 'orderInvoiceAssemblyList' // 指定的子級
      },
      tableData: [] // tree組件渲染的數據
    }
  },

// 方法集合
  methods: {
    // tree組件渲染的數據列表
    getSupplierPayInvoice () {
      this.tableData = [{
        accountId: 13,
        accountNo: `66`,
        orderNo: '444',
        totalReconciledAmount: 1000,
        confirmAccountDate: 1548482834000,
        span: true,
        orderInvoiceAssemblyList: [{
          invoiceNo: '67448',
          orderNo: '444',
          totalAmountTax: 1999,
          billingDate: 1548482834000,
          forCollection: 999,
          requestStatus: '未付款',
          receiptDate: '2019-1-30',
          accountInvoiceId: 11
        }, {
          orderNo: '55',
          totalAmountTax: 2999,
          billingDate: 1548482834000,
          forCollection: 5555,
          requestStatus: 1,
          accountInvoiceId: 12
        }]
      }, {
        accountId: 14,
        accountNo: '789',
        orderNo: '444',
        totalReconciledAmount: 2000,
        confirmAccountDate: 1548482834000,
        span: true,
        orderInvoiceAssemblyList: [{
          orderNo: '888',
          totalAmountTax: 3999,
          billingDate: 1548482834000,
          forCollection: 999,
          requestStatus: 2,
          accountInvoiceId: 13
        }, {
          orderNo: '999',
          totalAmountTax: 4888,
          billingDate: 1548482834000,
          forCollection: 5555,
          requestStatus: 1,
          accountInvoiceId: 14
        }, {
          orderNo: '889',
          totalAmountTax: 4888,
          billingDate: 1548482834000,
          forCollection: 5555,
          requestStatus: 1,
          accountInvoiceId: 15
        }]
      }]

    },

    // tree組件選擇改變事件
    handleCheckChange (val) {
      // console.log(val)
      // 使用getCheckedNodes可以獲取當前被選中的節點數據
      let selected = this.$refs.treeData.getCheckedNodes()
      console.log(33, selected)
    }
}

CSS

.invoice-list {
    border: 1px solid #ebeef5;
    margin-top: 10px;
    .invoice-header {
      background-color: #f8f8f9;
      display: flex;
      padding-left: 63px;
      border-bottom: 1px solid #ebeef5;
      .invoice-item {
        padding: 10px;
        padding-right: 0;
        flex: 1;
        border-left: 1px solid #ebeef5;
        padding-left: 10px;
      }
    }
    .el-tree-node__content {
      background: #f2f2f2;
      height: 40px;
    }
    .el-tree-node__children {
      .el-tree-node__content {
        background: #fff;
        border-bottom: 1px solid #ebeef5;
      }
    }
    .custom-tree-node {
      width: 100%;
      height: 100%;
      .total_info_box {
        background: #f2f2f2;
        line-height: 40px;
        span{
          float: left;
          font-size: 12px;
          margin: 0 15px;
          i{
            display: inline-block;
            margin-right: 3px;
          }
        }
      }
      .table_info_node {
        display: flex;
        height: 100%;
        .table_info_item {
          flex: 1;
          height: 100%;
          border-left: 1px solid #ebeef5;
          padding-left: 10px;
          line-height: 40px;
        }
      }
    }
  }