<template> <view class="uni-table-tr"> <checkbox-group v-if="selection === 'selection'" class="checkbox" :class="{'tr-table--border':border}" @change="change"> <label> <checkbox value="check" :checked="value"/> </label> </checkbox-group> <slot></slot> </view> </template> <script> /** * Tr 表格行组件 * @description 表格行组件 仅包含 th,td 组件 * @tutorial https://ext.dcloud.net.cn/plugin?id= */ export default { name: 'uniTr', options: { virtualHost: true }, data() { return { value: false, border: false, selection:false, widthThArr:[] }; }, created() { this.root = this.getTable() this.border = this.root.border this.selection = this.root.type this.root.trChildren.push(this) this.root.isNodata() }, mounted() { if(this.widthThArr.length > 0){ const selectionWidth = this.selection === 'selection'? 50:0 this.root.minWidth = this.widthThArr.reduce((a,b)=> Number(a) + Number(b)) + selectionWidth } }, destroyed() { const index = this.root.trChildren.findIndex(i=>i===this) this.root.trChildren.splice(index,1) this.root.isNodata() }, methods: { minWidthUpdate(width){ this.widthThArr.push(width) }, change(e) { this.root.trChildren.forEach((item) => { if (item === this) { this.root.check(this,e.detail.value.length > 0 ? true : false) } }) }, /** * 获取父元素实例 */ getTable() { let parent = this.$parent; let parentName = parent.$options.name; while (parentName !== 'uniTable') { parent = parent.$parent; if (!parent) return false; parentName = parent.$options.name; } return parent; }, } } </script> <style lang="scss"> .uni-table-tr { display: table-row; transition: all .3s; box-sizing: border-box; } .checkbox { padding: 12px 8px; width: 26px; padding-left: 12px; display: table-cell; // text-align: center; vertical-align: middle; color: #333; font-weight: 500; border-bottom: 1px #ddd solid; font-size: 14px; } .tr-table--border { border-right: 1px #ddd solid; } .uni-table-tr { ::v-deep .uni-table-th { &.table--border:last-child { border-right: none; } } ::v-deep .uni-table-td { &.table--border:last-child { border-right: none; } } } </style>