【前端vue】element-ui表格fixed操作栏且宽度自适应解决方案

element-ui表格fixed操作栏且宽度自适应解决方案

我另一篇文章讲了如何去实现前端的动态路由，以及页面按钮权限控制方案，那么只要会去控制表格内的数据行内操作栏按钮的显示，必然会影响到操作栏宽度的问题。

可能有部分人不知道，element-ui的表格，将某列当做操作栏，并且使其悬浮显示（fixed）,这一列是需要固定宽高的，并不会随着操作栏里面的内容宽度而自动撑大，比如当我本来有7个按钮，宽度也是我设的的宽度，刚好容下这7个按钮，如图
这个使用我给这个页面的按钮权限配置减少几个，这样是不是好丑啊，留白这么大，以为列宽是固定死的嘛

所以，我想了一个办法去实现自动适应列框，因为项目中的操作栏里面的内容都是用插槽（slot）去内嵌的，所有的按钮外面包了一层div，加了个class=“operation”,
并且这个el-table还是被我们封装成的一个组件叫BaseTable.vue，所有页面都共用的这个组件，这就很好办了只要改这个组件就行，说干就干，要自适应列宽，首先我们需要获取到操作栏的内容宽度，因为内容并没有设置宽度，而是有按钮去自动撑开的（需要父级div设置 width: fit-content;），但是有可能每行按钮都不一样的数量，导致内容宽度不一致，所以我们就需要遍历每一行表格的操作栏，并获取其内容宽度，然后把最大的赋值给el-column的width，这样就完成了自适应操作栏列宽。

以下是代码，操作栏的el-column的width绑定了data里面的initWidth

props:{
	tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示操作栏
    isShowOperate: {
      type: Boolean,
      default: true,
    },
},
data(){
	initWidth:0
},
watch: {
    'tableData': {
      handler(table) {
        this.flexColumnWidth(table.length)
      }, deep: true
    }
},
methods: {
	flexColumnWidth(length) {
		  //isShowOperate:是否显示操作栏，length 表格的数据
	      if (this.isShowOperate && length > 0) {
	        this.$nextTick(() => {
	          const multipleTable = this.$refs.multipleTable
	          //查找出操作栏内带class为operation的dom元素
	          const operations = [...multipleTable.$el.querySelectorAll('.operation')]
	          const newOperations = operations.slice(operations.length / 2, operations.length)
	          let maxValue = 0;
	          newOperations.forEach(item => {
	            if (item.offsetWidth > maxValue) {
	              maxValue = item.offsetWidth
	            }
	          })
	          this.initWidth = maxValue + 20
	        })
	      }
	    }
	 }

这样就实现了操作栏自动适应列宽，希望对小伙伴们有用