vue el-table 超出隐藏移入弹窗显示

迂幵2024-11-15 11:48

场景

处理空间有限或者需要展示详细但非即时必要信息

效果如下

关键代码

html 复制代码

<el-table-column show-overflow-tooltip prop="demo" label="label-name" width="120"></el-table-column>

完整案列

html 复制代码

<template>
  <div class="container">
    <el-table :data="demoList">
      <el-table-column label="姓名" prop="name" width="90"></el-table-column>
      <el-table-column label="性别" prop="sex" width="80"></el-table-column>
      <el-table-column label="年龄" prop="age" width="70"></el-table-column>
      <el-table-column show-overflow-tooltip prop="demo" label="label-name" width="120"></el-table-column>
    </el-table>
  </div>
</template>

javascript 复制代码

<script>
export default {
  data() {
    return {
      demoList: [
        {
          name: '张三',
          sex: '男',
          age: '18',
          demo: 'show-overflow-tooltip demo',
        },
      ],
    }
  },
}
</script>

完结！！！