【前端学习记录】在el-table中的操作列里有个被禁用确定按钮，当el-table的其他列通过v-if被隐藏时，按钮的禁用样式丢失

前言

最近在项目上遇到一个神奇的问题，就是在el-table中的操作列里有个被禁用的确定按钮，当el-table的其他列通过v-if被隐藏时，按钮的禁用样式丢失了。

复现条件

直接上代码吧

<template>
  <div>
    <el-dropdown trigger="click" :hide-on-click="false">
      <el-button
        type="text-primary"
        size="icon"
        icon="el-icon-setting">
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in colVis" :key="index">
          <el-checkbox v-model="item.value">
            {{item.name}}
          </el-checkbox>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--表格-->
    <div slot="table-obj">
      <en-table
        :url="API.ALERT"
      >
        <el-table-column
          prop="name"
          column-key="name"
          label="名称">
        </el-table-column>
        <el-table-column
          v-if="colVis.level.value"
          prop="level"
          column-key="level"
          label="等级">
        </el-table-column>
        <el-table-column
          label="操作"
          column-key="operate"
          width="100"
        >
          <template #default="{ row }">
            <el-button
              :disabled="row.disabled"
              type="text"
            >
              确定
            </el-button>
          </template>
        </el-table-column>
      </em-table>
    </div>
  </div>
</template>

<script>
import API from '../api';

export default {
  data() {
    return {
      API,
      colVis: {
        level: { name: '等级', value: true },
      },
    };
  },

  created() {
    this.init();
  },

  methods: {
    async init() {},
  },
};
</script>

解决思路

上述代码已经过简单化处理，en-table是基于el-table封装后的表格，现在出现的问题是当取消check-box时，确定按钮的禁用样式丢失了，经过代码调试，发现并不是逻辑导致的禁用消失。而是样式丢了。

同事想了种解决方案，就是在en-table上加个:key="Math.random()"，这样似乎是解决了问题，因为在取消某列的显示时，en-table会重新发送接口请求，重新刷新表格数据，所以表格发生了重新渲染。但是en-table里封装了分页逻辑，在非第一页取消check-box，重新渲染会跳转至第一页。所以该方案不完美。

由于禁用样式发生了漂移，就尝试在el-button外层加一层div，看是否能阻止样式的漂移。经过测试该方案可行。template为虚拟标签，el-table-column本身为一个组件，其间包裹的内容实际上为插槽内容，在本案例中，在el-button外层包裹一层div可阻止由于v-if操作表格列的显隐导致的禁用样式漂移问题。