赞
踩
参考
https://blog.csdn.net/qq_39526294/article/details/120525203
简单的
内容超出长度后隐藏,鼠标悬浮时显示全部
想实现,平时隐藏多余部分,点击单元格之后展示全部,并再次点击时隐藏
使用 formatter 实现
<el-table :data="list" @cell-click="clickContent" > <el-table-column prop="wen" label="文件" width="200px" :formatter="stateFormat" /> js 中 stateFormat(row, column, cellValue) { const a = '共' + row.num + '个 ' + row.wen if (row.flag === false) { if (!cellValue) return '' // if (cellValue.length > this.contentLength) { // 超过contentLength长度的内容隐藏 if (cellValue.length > 50) { // 超过contentLength长度的内容隐藏 // return cellValue.slice(0, this.contentLength) + '...' // return cellValue.slice(0, 50) + '...' return a.slice(0, 50) + '...' } return a } else { return a } }, clickContent(row, column, cell, event) { if (column.label === '文件') { // 只有点击数据内容列时才会展开 row.flag = !row.flag // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的 } },
其中 flag 值的设定为
getList() {
this.listLoading = true
getList(this.listQuery).then(response => {
this.total = response.data.total
// 计算包含文件个数
const a = response.data.items
const c = []
for (const i in a) {
a[i].flag = false // 添加 flag属性
c.push(a[i])
}
this.list = c
})
},
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。