vue管理系统（element-admin）在render函数中使用指令

问题描述

需求：table列表中文字溢出隐藏，并且隐藏的文字要使用title提示。

问题分析

• 需要一个title提示的指令或者方法
• 在table列表的数据中使用这个指令或方法

问题解决

• 写了一个全局指令, 如果文字溢出了就提示title，如果文字没有溢出就不显示title。

// 溢出隐藏显示title
  Vue.directive('title', {
    inserted: function (el, binding) {
      let padding = binding.value || 24
      el.addEventListener('mouseenter', (evt) => {
        let target = evt.target
        const { offsetWidth, title } = target // 目标元素宽
        let clientWidth = 10000
        if (evt.fromElement) {
          clientWidth = evt.fromElement.clientWidth - padding // 父元素宽
        }
        target.title = target.innerText
        if (offsetWidth < clientWidth) target.title = ""
      })
    }
  })

• 在table中使用这个指令（table没有封装）

<!-- v-title="50" 如果table的cellpadding过大可以给title绑定一个值来实现溢出提示效果 -->
<el-table-column label="名称" prop="name">
     <template slot-scope="{ row }">
        <span v-title>{{ row.name }}</span>
     </template>
</el-table-column>

• 在table中使用这个指令（table封装成组件）

// 注意在render一个span时，添加一个directives对象，其中的name就是全局注册的 title 指令。
return h('span', {directives: [{name:'title'}]}, name)