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.
72 lines
1.6 KiB
72 lines
1.6 KiB
3 weeks ago
|
<template>
|
||
|
|
<!-- :class="{'table--border':border}" -->
|
||
|
|
<view class="uni-table-td" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* Td 单元格
|
||
|
|
* @description 表格中的标准单元格组件
|
||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||
|
|
* @property {Number} align = [left|center|right] 单元格对齐方式
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'uniTd',
|
||
|
|
options: {
|
||
|
|
virtualHost: true
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
width: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
align: {
|
||
|
|
type: String,
|
||
|
|
default: 'left'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
border: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.root = this.getTable();
|
||
|
|
this.border = this.root.border;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* 获取父元素实例
|
||
|
|
*/
|
||
|
|
getTable() {
|
||
|
|
let parent = this.$parent;
|
||
|
|
let parentName = parent.$options.name;
|
||
|
|
while (parentName !== 'uniTable') {
|
||
|
|
parent = parent.$parent;
|
||
|
|
if (!parent) return false;
|
||
|
|
parentName = parent.$options.name;
|
||
|
|
}
|
||
|
|
return parent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.uni-table-td {
|
||
|
|
display: table-cell;
|
||
|
|
padding: 6px 8px;
|
||
|
|
// text-align: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
border-bottom: 1px #ddd solid;
|
||
|
|
// min-width: 150px;
|
||
|
|
color: #666;
|
||
|
|
font-size: 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table--border {
|
||
|
|
border-right: 1px #ddd solid;
|
||
|
|
}
|
||
|
|
</style>
|