dykj-outsource-12123/uni_modules/uni-ui/components/uni-th/uni-th.vue
2024-06-26 09:12:03 +08:00

79 lines
1.6 KiB
Vue

<template>
<view class="uni-table-th" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</view>
</template>
<script>
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
* @property {Number} width 单元格宽度
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
*/
export default {
name: 'uniTh',
options: {
virtualHost: true
},
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
}
},
data() {
return {
border:false
};
},
created() {
this.root = this.getTable('uniTable')
this.rootTr = this.getTable('uniTr')
this.rootTr.minWidthUpdate(this.width?this.width:140)
this.border = this.root.border
},
methods:{
/**
* 获取父元素实例
*/
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">
.uni-table-th {
padding: 12px 10px;
display: table-cell;
// text-align: center;
color: #333;
font-weight: 500;
border-bottom: 1px #ddd solid;
font-size: 14px;
// background-color: #efefef;
box-sizing: border-box;
}
.table--border {
border-right: 1px #ddd solid;
}
</style>