最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图:
一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的全选
使用表格的方式也可以勉强实现效果,但是在判断选择时,自己要在处理一下数据,感觉不太好,就找了找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) } }