话不多说,先看效果
上代码
- html代码:
<el-table-column property="address" label="地址" show-overflow-tooltip>
<template slot-scope="scope">
<!-- 编辑状态 -->
<el-tooltip v-show="isEdit" class="item" effect="dark" :content="scope.row.address" placement="top-start" :disabled="isShowTooltip">
<el-input placeholder="请输入" v-model="scope.row.address" clearable @mouseover.native="inputOnMouseOver($event)"> </el-input>
</el-tooltip>
<!-- 非编辑状态 -->
<span v-show="!isEdit">{
{scope.row.address}}</span>
</template>
</el-table-column>
- js代码:
// isEdit 是否编辑,isShowTooltip 是否使用tooltip
// 编辑状态的文字超长提示tooltip
inputOnMouseOver(event) {
const target = event.target
// 判断是否开启tooltip功能
if (target.offsetWidth < target.scrollWidth) {
this.isShowTooltip = false
} else {
this.isShowTooltip = true
}
}
**注:非编辑状态的由table自带属性
show-overflow-tooltip 解决!
{
{ scope.row.address }} 解决非编辑状态的内容显示状态;**
写在末尾
另外,如果嫌弃编辑状态出现的input边框难看,利用样式解决即可:
.table-box .el-input__inner {
border: none; /* 清除表格里面表单元素边框 */
}
如图:
以上就是本文的全部内容,如有不足,望大家多多指点! 谢谢!