You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.4 KiB
147 lines
3.4 KiB
<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 |
|
} |
|
}, |
|
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) |
|
}, |
|
// 选中 |
|
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 scoped> |
|
.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 #ebeef5 solid; |
|
font-size: 14px; |
|
} |
|
|
|
.tr-table--border { |
|
border-right: 1px #ebeef5 solid; |
|
} |
|
|
|
/* #ifndef APP-NVUE */ |
|
/* #endif */ |
|
</style> |