封装第三方组件（18）写个获取 td 的宽度的自定义指令
封装第三方组件（19）写个拖拽 td 的自定义指令
vue中自定义组件、指令、插件
vue 局部指令和全局指令
前端常见面试题五
8. 自定义指令
2021-06-29 Vue 第三方组件的二次封装
优化elementui框架Select组件远程搜索不支持上拉加载
封装第三方组件（21）写个拖拽 form 的自定义指令
【vue】8.0 指令、过滤器、传送门teleport、ren

UI库提供了很强大的 table 组件 —— el-table。很强很好用，只是需要设置每个td的宽度，这个有点烦，一般的做法是：

靠感觉设置每个 td 的宽度。
运行看效果。
如果不理想，需要调整宽度。
然后再运行看效果。

运气好的话，一次即可，但是如果运气不好的话，需要反复好多次，这个就比较麻烦了。那么有没有简便的方式呢？

既然 el-table 可以动态调整 td 的宽度，那么如果我们可以获得调整后的 td 的宽度，是不是就会很方便了呢？

改进后的步骤：

设置默认宽度；
添加测试数据，运行看效果；
拖拽调整 td 的宽度；
调整理想后，获取每个 td 的宽度；
设置 el-table 的td的宽度；

这样一次就可以调整完毕，那么问题来了，如何获取td的宽度呢？百度一下可以获得基础的方法，那么在vue3里面如果使用呢？

写一个自定义指令获取table的信息

tableManage.js

// element-plus 的 table，获取td的宽度等操作
const tableGet = (app, options) => {
  app.directive('tableget', {
    // 指令的定义
    mounted (el, binding) {
      console.log('===== el', el)
      console.log('===== binding', binding)

      // 获取td的宽度
      binding.value.getTdwidth = () => {
        // table 
        const table = el.getElementsByClassName('el-table__header')[0]
        // 第一个tr
        const tr = table.rows[0]
        // td 数量
        const tdCount = tr.cells.length
        // td 的宽度
        const tdsWitdh = []
        for (let i = 0; i < tdCount; i++) {
          const tdWidth = tr.cells[i].offsetWidth
          tdsWitdh.push(tdWidth)
        }
        return tdsWitdh
      }
    }
  })
}

export default tableGet

一个比较简单的自定义指令，通过 binding.value 传入一个对象，然后给这个对象加入各种Function，从而实现各种需求，比如获取td的宽度。

注册自定义指令

在main.js 里面注册这个指令

// 获取table的一些信息
import tableGet from './control-web/js/tableManage.js'
import App from './App.vue'

 createApp(App)
    .use(tableGet) // 获取table的一些信息
    .mount('#app')

使用自定义指令

我们可以给 el-table 加上这个指令

<nf-el-grid
    v-tableget="tableInfo"
    v-bind="girdMeta"
    :data-list="dataList"
    :selection="dataListState.choice"
/>
<el-button type="" @click="getTdWidth">获取td的宽度</el-button>


const tableInfo = {
  getTdwidth: () => {
    console.log('原始的获取td的函数')
  }
}

const getTdWidth = () => {
  const width = tableInfo.getTdwidth()
  console.log('指令传递的信息222：', width)
}

其实 tableInfo 定义一个空对象就可，不用加上 getTdWidth ，加上了也会被覆盖。
这里这么写是为了避免茫然。