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属性即可。
具体的代码就不写了，估计大家都有自己的编写习惯。
