275 lines
6.3 KiB
Vue
275 lines
6.3 KiB
Vue
|
<template>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
|
|||
|
|
<view class="uni-table-th-row">
|
|||
|
|
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
|
|||
|
|
<slot></slot>
|
|||
|
|
<view v-if="sortable" class="arrow-box">
|
|||
|
|
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
|
|||
|
|
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
|
|||
|
|
</view>
|
|||
|
|
</th>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import dropdown from './filter-dropdown.vue'
|
|||
|
|
/**
|
|||
|
|
* Th 表头
|
|||
|
|
* @description 表格内的表头单元格组件
|
|||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
|
|||
|
|
* @property {Number | String} width 单元格宽度（支持纯数字、携带单位px或rpx）
|
|||
|
|
* @property {Boolean} sortable 是否启用排序
|
|||
|
|
* @property {Number} align = [left|center|right] 单元格对齐方式
|
|||
|
|
* @value left 单元格文字左侧对齐
|
|||
|
|
* @value center 单元格文字居中
|
|||
|
|
* @value right 单元格文字右侧对齐
|
|||
|
|
* @property {Array} filterData 筛选数据
|
|||
|
|
* @property {String} filterType [search|select] 筛选类型
|
|||
|
|
* @value search 关键字搜素
|
|||
|
|
* @value select 条件选择
|
|||
|
|
* @event {Function} sort-change 排序触发事件
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'uniTh',
|
|||
|
|
options: {
|
|||
|
|
virtualHost: true
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
dropdown
|
|||
|
|
},
|
|||
|
|
emits:['sort-change','filter-change'],
|
|||
|
|
props: {
|
|||
|
|
width: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
align: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'left'
|
|||
|
|
},
|
|||
|
|
rowspan: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
colspan: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
sortable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
filterType: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
filterData: {
|
|||
|
|
type: Array,
|
|||
|
|
default () {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
border: false,
|
|||
|
|
ascending: false,
|
|||
|
|
descending: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 根据props中的width属性 自动匹配当前th的宽度(px)
|
|||
|
|
customWidth(){
|
|||
|
|
if(typeof this.width === 'number'){
|
|||
|
|
return this.width
|
|||
|
|
} else if(typeof this.width === 'string') {
|
|||
|
|
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
|
|||
|
|
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
|
|||
|
|
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
|
|||
|
|
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
|
|||
|
|
return this.width.replace('px', '')
|
|||
|
|
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
|
|||
|
|
let numberRpx = Number(this.width.replace('rpx', ''))
|
|||
|
|
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
|
|||
|
|
return Math.round(numberRpx * widthCoe)
|
|||
|
|
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
|
|||
|
|
return this.width
|
|||
|
|
} else { // 不符合格式
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
contentAlign() {
|
|||
|
|
let align = 'left'
|
|||
|
|
switch (this.align) {
|
|||
|
|
case 'left':
|
|||
|
|
align = 'flex-start'
|
|||
|
|
break
|
|||
|
|
case 'center':
|
|||
|
|
align = 'center'
|
|||
|
|
break
|
|||
|
|
case 'right':
|
|||
|
|
align = 'flex-end'
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
return align
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.root = this.getTable('uniTable')
|
|||
|
|
this.rootTr = this.getTable('uniTr')
|
|||
|
|
this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
|
|||
|
|
this.border = this.root.border
|
|||
|
|
this.root.thChildren.push(this)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
sort() {
|
|||
|
|
if (!this.sortable) return
|
|||
|
|
this.clearOther()
|
|||
|
|
if (!this.ascending && !this.descending) {
|
|||
|
|
this.ascending = true
|
|||
|
|
this.$emit('sort-change', { order: 'ascending' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.ascending && !this.descending) {
|
|||
|
|
this.ascending = false
|
|||
|
|
this.descending = true
|
|||
|
|
this.$emit('sort-change', { order: 'descending' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.ascending && this.descending) {
|
|||
|
|
this.ascending = false
|
|||
|
|
this.descending = false
|
|||
|
|
this.$emit('sort-change', { order: null })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
ascendingFn() {
|
|||
|
|
this.clearOther()
|
|||
|
|
this.ascending = !this.ascending
|
|||
|
|
this.descending = false
|
|||
|
|
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
|
|||
|
|
},
|
|||
|
|
descendingFn() {
|
|||
|
|
this.clearOther()
|
|||
|
|
this.descending = !this.descending
|
|||
|
|
this.ascending = false
|
|||
|
|
this.$emit('sort-change', { order: this.descending ? 'descending' : null })
|
|||
|
|
},
|
|||
|
|
clearOther() {
|
|||
|
|
this.root.thChildren.map(item => {
|
|||
|
|
if (item !== this) {
|
|||
|
|
item.ascending = false
|
|||
|
|
item.descending = false
|
|||
|
|
}
|
|||
|
|
return item
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
ondropdown(e) {
|
|||
|
|
this.$emit("filter-change", e)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取父元素实例
|
|||
|
|
*/
|
|||
|
|
getTable(name) {
|
|||
|
|
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-th {
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: table-cell;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
/* #endif */
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #909399;
|
|||
|
|
border-bottom: 1px $border-color solid;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-table-th-row {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table--border {
|
|||
|
|
border-right: 1px $border-color solid;
|
|||
|
|
}
|
|||
|
|
.uni-table-th-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.arrow-box {
|
|||
|
|
}
|
|||
|
|
.arrow {
|
|||
|
|
display: block;
|
|||
|
|
position: relative;
|
|||
|
|
width: 10px;
|
|||
|
|
height: 8px;
|
|||
|
|
// border: 1px red solid;
|
|||
|
|
left: 5px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.down {
|
|||
|
|
top: 3px;
|
|||
|
|
::after {
|
|||
|
|
content: '';
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 2px;
|
|||
|
|
top: -5px;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
&.active {
|
|||
|
|
::after {
|
|||
|
|
background-color: #007aff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.up {
|
|||
|
|
::after {
|
|||
|
|
content: '';
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 2px;
|
|||
|
|
top: 5px;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
&.active {
|
|||
|
|
::after {
|
|||
|
|
background-color: #007aff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|