最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图:

 

 

 

 

使用表格的方式也可以勉强实现效果,但是在判断选择时,自己要在处理一下数据,感觉不太好,就找了找element的其他组件.发现了tree树形组件,展示出来的效果是自己想要的

 

 

之后用了tree树形组件,使用了自定义方法,实现效果还能满足需求,就整理了一下,下面把代码贴上来

 

template:

        
      
               
         
        
          
发票号
        
          
订单号
        
          
发票金额
        
          
开票日期
        
          
收款方式
        
          
状态
        
          
发票收款日期
        
          
操作
      
         
      
                 
                  
          
          
           
            
            对账单号: {
      {data.accountNo | isEmptyVal}}            
            对账金额: {
      {data.totalReconciledAmount | formatUSD}}            
            对账日期: {
      {data.confirmAccountDate | formatYMD}}          
           
          
                       {
      {data.invoiceNo}}            {
      {data.orderNo}}            {
      {data.totalAmountTax}}            {
      {data.billingDate}}            {
      {data.forCollection}}            {
      {data.requestStatus}}            {
      {data.receiptDate}}            
             
              详情
                               
          
      
             
        

 

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