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