VUE ElementUI中table框设置文字超出隐藏及设置提示框样式

当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出部分隐藏,鼠标移上去显示提示框,效果如下:
在这里插入图片描述

<el-table-column
          prop="description"
          label="模板说明"
          width="400"
          :show-overflow-tooltip="true"
        />

再对其提示框在全局中(若多个页面中有表格不用重复设置)设置最大宽度,以防文字内容过多会超屏显示
方法:在src>assets>css中建一个tooltip.css文件即可,文件内容如下:

/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
    max-width: 800px;
  
  }
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以在表格的列定义添加一个多选列,示例代码如下: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> ``` 在这个例子,我们在列定义添加了一个 `type="selection"` 的列,这个列会在表格的左侧显示一个多选,用户可以通过选多选来选择表格的行。注意,这个列的 `prop` 属性没有定义,因为它不会显示任何数据,只是用来实现多选的功能。 另外,需要注意的是,在使用多选列的时候,需要在表格组件上添加 `@selection-change` 事件监听器来处理用户的选择操作: ```html <template> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [ // 表格数据 ], selectedRows: [] // 保存用户选择的行 }; }, methods: { handleSelectionChange(selection) { // 更新用户选择的行 this.selectedRows = selection; } } }; </script> ``` 在这个例子,我们定义了一个 `selectedRows` 数组来保存用户选择的行,然后在 `@selection-change` 事件监听器更新这个数组。你可以在监听器执行任意的操作,比如更新表格的数据、发送请求等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值