如上图,这是表格的一角截图,公司的同款老板喜欢吧表所有字段堆上去,而且有一些是文本字段,就是说很多很多很多字可能还是废话放进表格,对放进表格,导致某一个列即便宽度还OK也要超大篇幅,导致其他列上下空白特别多,所以一般都需要一个更多的组件
<template>
<div class="more-box" :class="{'open':isOpen}" :style="{'max-height':maxHeight+'px'}">
<slot></slot>
<el-link type="primary" @click="open()" class="btn-more">>>></el-link>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({})
/**
* 文本更多组件,超出后显示更多
*/
// @ts-ignore
export default class ComUiMore extends Vue {
/**
* 是否展开
*/
private isOpen: boolean = false;
@Prop({
default: 100
})
private maxHeight: number;
open() {
this.isOpen = true;
}
mounted() {
if (this.$el.clientHeight >= this.$el.scrollHeight) {
this.isOpen = true;
console.log(this.$el.innerText);
}
}
}
</script>
<style lang="scss" scoped>
.more-box {
position: relative;
&.open {
max-height: none !important;
.btn-more {
display: none;
}
}
.btn-more {
position: absolute;
display: block;
bottom: 1px;
right: 1px;
z-index: 10;
background-color: #fff;
}
}
</style>
/**
* 文本更多
*/
import comUiMore from '@/components/com-ui/com-ui-more.vue';
Vue.component('more', comUiMore);
<el-table-column>
<template slot-scope="scope">
<more :max-height="69" :key="scope.row.id">
{{scope.row.experience}}
</more>
</template>
</el-table-column>
最后一串代码记得加上key,不让你会发现第一页数据展开后,第二页离奇的发现也被展开了,因为vue把组件复用了
==============================================
很久很久以前也写过一个类似于csdn的查看更多功能