element表格单元文本过长处理-爱代码爱编程
element有提供一个表格组件,在做后台管理时,数据列表渲染会经常用到,不知道你有没有遇到过这种情况,就是表格中某一列的内容文本过长导致表格的高度会无限拔高。这种情况肯定是不允许的,所以就必须文本超出长度就必须限制一下。我能想到的就两种方法:第一种是超出长度就省略,后面加个按钮来控制,第二种就是限制高度,超出内容隐藏。按钮控制显示全部,这个的缺点是会有个滚动条。
这里我选择的是第一种,即文本过长,超出部分则省略,并设置个按钮来控制展开/收起。先看效果图:
为了方便使用特意将其封装成一个组件了,只要vue项目中引入了element即可直接使用:
TruncateText.vue组件代码:
该组件主要传两个参数,一个是过长的文本text,另一个是长度限制maxLength。
<template>
<div class="long-text">
<div>{{ truncatedText }}</div>
<el-button type="text" @click="toggleShowAll" v-if="isExpanded">{{showAll?'收起':'展开'}}</el-button>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
required: true
},
maxLength: {
type: Number,
default: 20
}
},
data() {
return {
showAll: false,
localMaxLength: this.maxLength,
}
},
computed:{
truncatedText() {
if (this.text.length <= this.localMaxLength) {
return this.text;
}
return `${this.text.substring(0, this.maxLength)}...`;
},
isExpanded(){
return this.text.length > this.maxLength;
}
},
methods: {
toggleShowAll() {
if(this.showAll){ //true->false
this.localMaxLength=this.maxLength;;
}
if(!this.showAll){
this.localMaxLength=Infinity;
}
this.showAll = !this.showAll
}
}
}
</script>
<style scoped>
.long-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
</style>
父组件table.vue使用示例:
<template>
<div class="table-wrapper">
<el-table :data="tableData" class="my-table">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="描述">
<template slot-scope="scope">
<truncate-text :text="scope.row.description" :maxLength="50"></truncate-text>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import TruncateText from './TruncateText.vue';
export default {
components: {
TruncateText
},
data() {
return {
tableData: [
{ name: '张三', description: '这是一段非常长的描述,需常长的描述,需要截断并显示省略号,同时提常长的描述,需要截断并显示省略号,同时提常长的描述,需要截断并显示省略号,同时提要截断并显示省略号,同时提供展开/收起功能。' },
{ name: '李四', description: '这是另外一段很长的描述,同样需要截断并显示省略号,但是内容不太一样。'}
]
};
}
};
</script>
<style>
.table-wrapper {
max-width: 800px;
margin: 0 auto;
}
.my-table {
font-size: 14px;
}
.el-table__body-wrapper {
border: none;
}
.el-table__row:hover {
background-color: #f5f7fa;
}
.truncate-text {
display: inline-block;
vertical-align: middle;
max-width: 400px;
}
.truncated {
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.more-btn {
margin-top: 0.5em;
}
</style>
这是一个很简单的例子,但是实用性很高,业务中也会很常见,记录一下,方便下次直接拿来用。