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
  })
},