iview--table表格title提示和气泡提示

说明：

文本不换行，超出显示省略号，两种提示方式，title提示和气泡提示

气泡提示不足：当内容没超过一行，也会出现气泡提示。觉得不如Element-UI的table组件好用。

方法一、

<Table border :columns="tableColumn" :data="tableData"></Table>mounted() {this.initTableColumn('tableColumn')
},
methods: {initTableColumn(columnName) {//  提示一：title提示for (let i = 0; i < this[columnName].length; i++) {if (!this[columnName][i].render) {this.$set(this[columnName][i], 'ellipsis', true)this.$set(this[columnName][i], 'render', (h, params) => {return h('span', {attrs: {title: params.row[params.column.key]}}, params.row[params.column.key])})}}//  title提示for (let i = 0; i < this[columnName].length; i++) {if (!this[columnName][i].render) {this.$set(this[columnName][i], 'render', (h, params) => {return h('div', [h('span', {style: {display: 'inline-block',width: '100%',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'},domProps: {title: params.row[params.column.key]}}, params.row[params.column.key])])})}}// 提示二：气泡提示for (let i = 0; i < this[columnName].length; i++) {if (!this[columnName][i].render) {this.$set(this[columnName][i], 'ellipsis', true)this.$set(this[columnName][i], 'render', (h, params) => {return h('Tooltip', {props: { placement: 'top' }}, [params.row[params.column.key],h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row[params.column.key])])})}}}
}

①：最原始的超出后省略.., title显示：

{title: '录音名称',key: 'recName',width: 260,align: 'center',// render: (h, params) => {//     return h('div', [//         h('span', {//             style: {//                 display: 'inline-block',//                 width: '100%',//                 overflow: 'hidden',//                 textOverflow: 'ellipsis',//                 whiteSpace: 'nowrap',//                 cursor: 'pointer',//             },//             domProps: {//                 title: params.row.recName//             }//         }, params.row.recName)//     ]);// }
}

②：iview的 Tooltip显示，但是省略号不好处理，可以没有省略。。。，直接超出的部分不显示： ellipsis: true, //超出长度时用...显示

{title: '录音名称',key: 'recName',width: 260,align: 'center',// render: (h, params) => {//     return h('Tooltip', {//     props: {//         placement: 'top'//     }//     }, [//         params.row.recName,//         h('span', {//         slot: 'content',             //slot属性//         style: {//             whiteSpace: 'normal',//             wordBreak: 'break-all'//         }//         }, params.row.recName)//     ])// }
},

方法二、还有一个最简单的方法：tooltip:"false"

{title: '录音名称',key: 'recName',width: 260,align: 'center',tooltip:"false"}

iview ui里面 table表格title提示和气泡提示相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
iview组件的Table表格的内容过多时，显示title提示
在iview的Table表格中,如果数据超出当前列的宽度,多余的部分会折行显示,使得该行的高度增加.为了实现* 文本将不换行,超出部分显示为省略号的效果,iview提供了表头属性ellipsis.然 ...
iview ui 全静态表格，增删改查，分页功能
本demo是一个非常全的,后台管理系统类的表单:增.删.改.查.4个主要功能都齐全的demo,数据采用的本地变量数组加载时调用:非常适用于纯前端页面的渲染:欢迎大家done下学习,以及提问题:(非常适 ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
解决iview UI的Table组件数据刷新但是页面不刷新的问题
在改变了 Table 绑定的 data 变量的数值后,表格的数据刷新了,但是页面不刷新,之前滚动到的位置仍然在那里,而且如果左右两侧有固定列的时候,会错位,解决方法是给 Table 组件绑定一个 Ke ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图效果图示例 demo 代码引用 element-u ...
vue iview UI 隐藏Table组件里的某些列
我们在做Table的时候经常会根据一些条件需要进行隐藏.因此是否可以提供这样一个显示隐藏的属性,能够设置某列是隐藏的呢? 下面来看看效果: 现在视图里面加上动态列: <Table height= ...

iview ui里面 table表格title提示和气泡提示

iview--table表格title提示和气泡提示

方法一、

方法二、还有一个最简单的方法：tooltip:"false"

iview ui里面 table表格title提示和气泡提示相关推荐

最新文章

热门文章