Vue ElementUI el-table 单元格内容过长被隐藏时显示 tooltip

news/2024/9/13 3:04:27 标签: elementui, table

API 

el-table 设置属性 show-overflow-tooltip 为 true

 代码

<template>
    <div>
        <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column fixed prop="date" label="日期" ></el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="province" label="省份" ></el-table-column>
            <el-table-column prop="city" label="市区" ></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="zip" label="邮编" ></el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }
            ]
        }
    }
}
</script>

知识点

1.  代码第 8 行,show-overflow-tooltip 设为 true;

2. 代码第 3 行,注意这里 width: 100%。外框够宽就不会有隐藏。

效果

 

 

 


http://www.niftyadmin.cn/n/581939.html

相关文章

用replaceAll去掉身份证中的特殊符号

//去掉特殊符号 如500213719851119037X# 去掉# (保留X)cardNo cardNo.replaceAll("[^\\d|X]", "");最后cardNo 500213719851119037X

TableView的accessoryButtonTappedForRow方法执行的时机

敲代码时遇到了这个问题,别偷懒,写下来备查. 当你在IB中对TableView中的accessory(注意,我说的是cell中的accessory,而不是cell)创建segue时,如果你在VC中同时实现以下4个方法,请问调用的次序是神马!? //1 func tableView(_ tableView: UITableView, accessoryButtonTappedF…

c语言面试题__指针篇

1. char * const p;   char const * p   const char *p   上述三个有什么区别&#xff1f;   char * const p; //常量指针&#xff0c;p的值不可以修改   char const * p&#xff1b;//指向常量的指针&#xff0c;指向的常量值不可以改   const char *p&#xff1…

Vue ElementUI el-table 表头不换行且宽度自适应

参考 此篇文章 &#xff0c;在此记录自己的理解和使用。 API el-table 设置属性 render-header 代码 <template><div><el-table :data"tableData" style"width: 100%" height"250"><el-table-column v-for"col of…

replaced替换特殊符号如* ? + \ | *等

对字符串使用replaceAll()方法替换 * ? \ | 等字符的时候会报以下异常 Dangling meta character * near index 0 这主要是因为这些符号在正则表达示中有相应意义。 只需将其改为 [*] 或 \\* 即可。 [colorred]实例&#xff1a;str str.replaceAll("[?]", "&…

Swift中enum自定义类型的实现

在Swift中枚举类型非常强大,内置的实现可以大大减少我们手敲的代码量.下面碰巧就有这么一个需求:Person类里面有一个type属性,其值包含2个内容,一个是name,类型为String,另一个是logo,类型也为字符串,不过表现为绘文字emoji. 因为结构或类的静态属性都可以用点访问符来直接访问…

CSS padding 不可用为负值

冒犯了&#xff0c;才注意这个细节。。。 W3School padding API 截图 浏览器中也有提示 解决方案&#xff1a; 一般情况下可以用 margin 或 transform&#xff0c;如下图两种方式向左移动

jquery高亮当前选中菜单

$(".links a.sys").click(function(){//$(this).addClass("sys").siblings().removeClass("sys");$(".links a").removeClass("current");//首先移除全部的current$(this).addClass("current");//选中的添加curre…