This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

I will share my notes with you during the learning process. I hope it will be helpful for you to grow and progress together 💪~ if you like it, you can like it or leave a message 💕~~~, thank you ⭐ ⭐ ⭐ ~~

The requirement is that you change the width of the columns in one table and the same width in the other table. This article uses the VUE + Element UI framework. This event is triggered when dragging a table header changes the width of a columnThe specific code is as follows:

    <el-table :data="tableData" border @header-dragend="headerdragend" style="width: 100%">
      <el-table-column v-for="column in tableTitleList" :fixed="column.fixed" :prop="column.prop" :label="column.label"
        :width="column.width">
      </el-table-column>
      <el-table-column fixed="right" label="Operation" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">To view</el-button>
          <el-button type="text" size="small">The editor</el-button>
        </template>
      </el-table-column>
    </el-table>
    <hr>
    <el-table :data="tableData" border @header-dragend="headerdragend" style="width: 100%">
      <el-table-column v-for="column in tableTitleList" :fixed="column.fixed" :prop="column.prop" :label="column.label"
        :width="column.width">
      </el-table-column>
      <el-table-column fixed="right" label="Operation" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">To view</el-button>
          <el-button type="text" size="small">The editor</el-button>
        </template>
      </el-table-column>
    </el-table>
Copy the code
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: "Date".width: "150"
            },
            {
              prop: "name".label: "Name".width: "120"}, {prop: "province".label: "Province".width: "120"}, {prop: "city".label: "Downtown".width: "120"}, {prop: "address".label: "Address".width: "300"}, {prop: "zip".label: "Zip code".width: "120"],},tableData: [{
            date: '2016-05-02'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
          }, {
            date: '2016-05-04'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai.zip: 200333
          }, {
            date: '2016-05-01'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'.zip: 200333
          }, {
            date: '2016-05-03'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.zip: 200333}}}]Copy the code

The renderings are as follows:

If you have a better idea, please write it down in the comments ~~~~ welcome to read it ~~~⭐️⭐️⭐