Vue之 设置单元格宽度超出时隐藏，点击就显示全部 |
您所在的位置：网站首页 › 点击展开全部文章怎么设置 › Vue之 设置单元格宽度超出时隐藏，点击就显示全部 |
Vue之 设置单元格宽度超出时隐藏，点击就显示全部
|
参考 https://blog.csdn.net/qq_39526294/article/details/120525203 简单的 内容超出长度后隐藏，鼠标悬浮时显示全部
使用 formatter 实现 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 }) }, |
想实现，平时隐藏多余部分，点击单元格之后展示全部，并再次点击时隐藏【本文地址】