--- theme: cyanosis --- **这是我参与8月更文挑战的第9天，活动详情查看：** [8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831") > 学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~ > 如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~ 需求是两个表格，改变其中一个表格列的宽，另一个表格也随之相应改变同等宽度。本文是用的vue+element ui框架。文中使用header-dragend方法，官网有介绍：当拖动表头改变了列的宽度的时候会触发该事件 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f290a5bc2b5540a28df84349ef9d6d39~tplv-k3u1fbpfcp-watermark.image) 具体代码如下： ```html

``` ```js methods: { handleClick(row) { console.log(row); }, headerdragend() { top.console.log('headerdragend', arguments) var el = arguments[3].target; var clist = el.parentNode.parentNode.parentNode.parentNode.children[0].children; setTimeout(() => { this.tableTitleList.forEach((v, idx) => { v.width = (clist[idx] && clist[idx].width) || 'auto' }) }, 100) }, } data() { return { tableTitleList: [ { fixed: true, prop: "date", label: "日期", width: "150" }, { prop: "name", label: "姓名", width: "120", }, { prop: "province", label: "省份", width: "120", }, { prop: "city", label: "市区", width: "120", }, { prop: "address", label: "地址", width: "300", }, { prop: "zip", label: "邮编", width: "120", }, ], tableData: [{ date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1517 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1519 弄', zip: 200333 }, { date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1516 弄', zip: 200333 }] } } ``` 效果图如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3df76c82f949434a82f6ae0ba21ca756~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/240aa87e78404d5d85f137d3074be7f7~tplv-k3u1fbpfcp-watermark.image) > **如果大家有更好的方法可以写在评论里供大家参考~~~~ 欢迎阅读~~~⭐️⭐️⭐️**