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

最近做項目遇到一個需求,表格里可以展開,可以選擇,大概效果如下圖:

 

項目源碼:  https://github.com/shengbid/vue-demo  這個項目里會把平時博客寫的一些功能的代碼都放在里面,有需要可以下載看看,有幫助的話點個star哈

 

 

 

 

 

使用表格的方式也可以勉強實現效果,但是在判斷選擇時,自己要在處理一下數據,感覺不太好,就找了找element的其他組件.發現了tree樹形組件,展示出來的效果是自己想要的

 

 

之后用了tree樹形組件,使用了自定義方法,實現效果還能滿足需求,就整理了一下,下面把代碼貼上來

 

template:

<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)
    }
}

 sass樣式

  .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;
        }
      }
    }
  }