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.
79 lines
1.7 KiB
79 lines
1.7 KiB
<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: 10px 2px; |
|
display: table-cell; |
|
// text-align: center; |
|
color: #333; |
|
font-weight: 500; |
|
border-bottom: 1px #ddd solid; |
|
font-size: 13px; |
|
// background-color: #efefef; |
|
box-sizing: border-box; |
|
background-color: #00B7EE; |
|
} |
|
.table--border { |
|
border-right: 1px #ddd solid; |
|
} |
|
</style>
|
|
|