<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>
|
