el-table表格 操作栏 自适应宽度 笔记

效果：

实现：

template 代码  el-table-column绑定动态宽度 intiWidth

<template>
    <el-table :data="tableData" ref="table">
        //绑定initWidth
        <el-table-column label="操作" :width="initWidth">
              <template v-slot="{ row }">
                <span class="operation">
                  <el-button
                    size="mini"
                    v-for="btn in btnList"
                    :type="btn.type"
                    @click="btn.handle(row)"
                    >{{ btn.label }}</el-button
                  >
                </span>
              </template>
          </el-table-column>
    </el-table>
</template>


export default{
    data(){
        initWidth:0,//默认值给0 方便计算
        tableData:[],//表格数据
    }
}

实现的方法：

首先通过获取表格的ref，multipleTable

给每个操作按钮绑定类名

通过querySelectorAll获取下面的所有喊operation类名的元素来计算宽度

 methods: {
    flexColumnWidth(length) {
      //length 表格的数据
      if (length > 0) {
        this.$nextTick(() => {
          const multipleTable = this.$refs.table;
          //查找出操作栏内带class为operation的dom元素
          const operations = [
            ...multipleTable.$el.querySelectorAll(".operation"),
          ];
          let maxValue = 0;
          operations.forEach((item) => {
            if (item.offsetWidth > maxValue) {
              maxValue = item.offsetWidth;
            }
          });
          this.initWidth = maxValue + 20;
        });
      }
    },
  },

最后再监听表格数据的变化来执行方法，这样就大功告成啦

watch: {
    tableData: {
      handler(value) {
        this.flexColumnWidth(value.length);
      },
      deep: true,
    },
},

如果想写成全局使用 ，那么可以使用vue的mixin

以下是如何将这个方法作为 mixin

// 在 src/mixins 中创建一个文件，比如 flexColumnWidthMixin.js
export default {
  methods: {
    flexColumnWidth(length) {
      if (length > 0) {
        this.$nextTick(() => {
          const multipleTable = this.$refs.table;
          const operations = [
            ...multipleTable.$el.querySelectorAll(".operation"),
          ];
          let maxValue = 0;
          operations.forEach((item) => {
            if (item.offsetWidth > maxValue) {
              maxValue = item.offsetWidth;
            }
          });
          this.initWidth = maxValue + 20;
        });
      }
    },
  },
};

 然后在你的 Vue 项目中，可以在 main.js 或其他入口文件中引入并使用这个 mixin： 

import Vue from 'vue';
import FlexColumnWidthMixin from '@/mixins/flexColumnWidthMixin'; // 修改路径为实际路径

Vue.mixin(FlexColumnWidthMixin);

// 现在，flexColumnWidth 方法就可以在任何组件中使用了

 在你的组件中，你就可以直接使用 flexColumnWidth 方法：

export default {
  mounted() {
    this.flexColumnWidth(this.yourData.length);//你的数据
  },
};