优化组件/更新
This commit is contained in:
@@ -77,7 +77,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$checked-color: #007aff;
|
||||
$uni-primary: #007aff !default;
|
||||
$border-color: #DCDFE6;
|
||||
$disable:0.4;
|
||||
|
||||
@@ -125,8 +125,8 @@
|
||||
}
|
||||
|
||||
&.checkbox--indeterminate {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
@@ -147,7 +147,7 @@
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
@@ -160,8 +160,8 @@
|
||||
|
||||
// 选中
|
||||
&.is-checked {
|
||||
border-color: $checked-color;
|
||||
background-color: $checked-color;
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<!-- #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>
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
|
||||
@checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
</th>
|
||||
<slot></slot>
|
||||
<!-- <uni-th class="th-fixed">123</uni-th> -->
|
||||
@@ -11,7 +12,8 @@
|
||||
<!-- #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>
|
||||
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
|
||||
@checkboxSelected="checkboxSelected"></table-checkbox>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
@@ -20,152 +22,163 @@
|
||||
|
||||
<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
|
||||
/**
|
||||
* Tr 表格行组件
|
||||
* @description 表格行组件 仅包含 th,td 组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTr',
|
||||
components: {
|
||||
tableCheckbox
|
||||
},
|
||||
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
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
keyValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
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 = Number(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)
|
||||
if (this.widthThArr.length > 0) {
|
||||
const selectionWidth = this.selection === 'selection' ? 50 : 0;
|
||||
this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
|
||||
}
|
||||
},
|
||||
// 选中
|
||||
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
|
||||
}
|
||||
return parent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$border-color: #ebeef5;
|
||||
$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;
|
||||
}
|
||||
|
||||
.uni-table-tr {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: table-row;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
.uni-table-tr {
|
||||
::v-deep .uni-table-th {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uni-table-td {
|
||||
&.table--border:last-child {
|
||||
// border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user