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 ，加上了也会被覆盖。
这里这么写是为了避免茫然。

获取 td 的宽度

然后就是调用函数获取 td 的宽度了。我们运行一下看看效果。

• 初始情况

默认的宽度 获取宽度

• 调整后的情况

调整后的表格 获取调整后的宽度

得到宽度之后，我们可以设置 el-table 的 el-table-column 的 width属性。

代码生成器

拿到宽度之后，需要一个一个属性的设置，还是有些麻烦，最后我们可以做一个简单的代码生成器。

这个可以根据项目的需求以及编码规范，做个 el-table 的 el-table-column 的模板，然后替换一下 width属性即可。

具体的代码就不写了，估计大家都有自己的编写习惯。