From 6a6421c72234c88ffbad6302be85a851416bc9eb Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期四, 27 七月 2023 10:47:16 +0800 Subject: [PATCH] # --- uni_modules/uni-table/components/uni-tr/uni-tr.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 171 insertions(+), 0 deletions(-) diff --git a/uni_modules/uni-table/components/uni-tr/uni-tr.vue b/uni_modules/uni-table/components/uni-tr/uni-tr.vue new file mode 100644 index 0000000..f9b9671 --- /dev/null +++ b/uni_modules/uni-table/components/uni-tr/uni-tr.vue @@ -0,0 +1,171 @@ +<template> + <!-- #ifdef H5 --> + <tr class="uni-table-tr"> + <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }"> + <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox> + </th> + <slot></slot> + <!-- <uni-th class="th-fixed">123</uni-th> --> + </tr> + <!-- #endif --> + <!-- #ifndef H5 --> + <view class="uni-table-tr"> + <view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }"> + <table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox> + </view> + <slot></slot> + </view> + <!-- #endif --> +</template> + +<script> + import tableCheckbox from './table-checkbox.vue' +/** + * Tr 琛ㄦ牸琛岀粍浠� + * @description 琛ㄦ牸琛岀粍浠� 浠呭寘鍚� th,td 缁勪欢 + * @tutorial https://ext.dcloud.net.cn/plugin?id= + */ +export default { + name: 'uniTr', + components: { tableCheckbox }, + props: { + disabled: { + type: Boolean, + default: false + }, + keyValue: { + type: [String, Number], + default: '' + } + }, + options: { + virtualHost: true + }, + data() { + return { + value: false, + border: false, + selection: false, + widthThArr: [], + ishead: true, + checked: false, + indeterminate:false + } + }, + created() { + this.root = this.getTable() + this.head = this.getTable('uniThead') + if (this.head) { + this.ishead = false + this.head.init(this) + } + this.border = this.root.border + this.selection = this.root.type + this.root.trChildren.push(this) + const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue) + if(rowData){ + this.rowData = rowData + } + 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 + } + }, + // #ifndef VUE3 + destroyed() { + const index = this.root.trChildren.findIndex(i => i === this) + this.root.trChildren.splice(index, 1) + this.root.isNodata() + }, + // #endif + // #ifdef VUE3 + unmounted() { + const index = this.root.trChildren.findIndex(i => i === this) + this.root.trChildren.splice(index, 1) + this.root.isNodata() + }, + // #endif + methods: { + minWidthUpdate(width) { + this.widthThArr.push(width) + }, + // 閫変腑 + checkboxSelected(e) { + let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue) + this.checked = e.checked + this.root.check(rootData||this, e.checked,rootData? this.keyValue:null) + }, + change(e) { + this.root.trChildren.forEach(item => { + if (item === this) { + this.root.check(this, e.detail.value.length > 0 ? true : false) + } + }) + }, + /** + * 鑾峰彇鐖跺厓绱犲疄渚� + */ + getTable(name = 'uniTable') { + let parent = this.$parent + let parentName = parent.$options.name + while (parentName !== name) { + parent = parent.$parent + if (!parent) return false + parentName = parent.$options.name + } + return parent + } + } +} +</script> + +<style lang="scss"> +$border-color: #ebeef5; + +.uni-table-tr { + /* #ifndef APP-NVUE */ + display: table-row; + transition: all 0.3s; + box-sizing: border-box; + /* #endif */ +} + +.checkbox { + padding: 0 8px; + width: 26px; + padding-left: 12px; + /* #ifndef APP-NVUE */ + display: table-cell; + vertical-align: middle; + /* #endif */ + color: #333; + font-weight: 500; + border-bottom: 1px $border-color solid; + font-size: 14px; + // text-align: center; +} + +.tr-table--border { + border-right: 1px $border-color solid; +} + +/* #ifndef APP-NVUE */ +.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; + } + } +} + +/* #endif */ +</style> -- Gitblit v1.9.1