当前位置:   article > 正文

Vue之 设置单元格宽度超出时隐藏,点击就显示全部_vue table div过长隐藏

vue table div过长隐藏

参考
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 // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
  }
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

其中 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
  })
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/91750
推荐阅读
相关标签