Element-ui 之 解决表格中编辑与非编辑状态文字超出时弹出文字提示（利用Tooltip 组件）

Posted 2021-07-28 Zhuangvi

目录

• • 话不多说，先看效果
  • 上代码
  • 写在末尾

话不多说，先看效果

 
 

上代码

• 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; /* 清除表格里面表单元素边框 */
}

如图：

 
 
以上就是本文的全部内容，如有不足，望大家多多指点！ 谢谢！