Vue.js Element-UI el-table如何根据屏幕宽度显示或隐藏表格列

核心实现逻辑是动态过滤要渲染的列配置，不需要写两套表格模板，列显示规则可以灵活自定义。 #

第一步：修改模板代码 #

移除原来直接绑定在el-table上的整表宽度判断，改为遍历经过宽度过滤后的列配置：

<el-table :data="tableData" empty-text="Sem dados a exibir :( ">
  <el-table-column
    v-for="column in showColumns"
    :key="column.label"
    :min-width="column.minWidth"
    :prop="column.prop"
    :label="column.label"
  >
  </el-table-column>
</el-table>

注意：原来直接在模板里写v-if="window.width > 855"是无效的，模板里无法直接获取响应式的window宽度变化，而且整表v-if切换会导致表格重新渲染，性能差还会丢失交互状态。

第二步：修改JS逻辑 #

新增响应式的窗口宽度变量，通过计算属性返回当前宽度下需要显示的列，同时监听窗口resize事件同步宽度：

export default {
  data() {
    return {
      windowWidth: window.innerWidth, // 初始化当前窗口宽度
      tableColumnsMd: [
        {
          prop: "nome",
          label: "Nome",
          minWidth: 150,
        },
        {
          prop: "estado",
          label: "Estado",
          minWidth: 200,
        },
        {
          prop: "dataCadastro",
          label: "Cadastro",
          minWidth: 150,
        },
        {
          prop: "idConta",
          label: "Conta",
          minWidth: 100,
        },
      ],
      tableData: [],
    };
  },
  computed: {
    // 根据当前窗口宽度返回要显示的列，所有显示规则在这里配置即可
    showColumns() {
      // 宽度 >=853px 时显示全部列
      if (this.windowWidth >= 853) {
        return this.tableColumnsMd
      }
      // 宽度 <853px 时的显示规则，按需修改
      // 规则1：显示前3列 → return this.tableColumnsMd.slice(0, 3)
      // 规则2：显示第一列+最后一列 → return [this.tableColumnsMd[0], this.tableColumnsMd.at(-1)]
      return this.tableColumnsMd.slice(0, 3)
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateWindowWidth)
  },
  beforeUnmount() {
    // 组件销毁时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.updateWindowWidth)
  },
  methods: {
    updateWindowWidth() {
      this.windowWidth = window.innerWidth
    }
  }
}

自定义配置说明 #

你可以根据需求自由调整列显示规则，常用配置方式如下：

• 多断点适配：如果需要加更多宽度规则，比如宽度小于600px时只显示第一列，直接在showColumns计算属性里加判断分支即可：

  if (this.windowWidth < 600) {
    return [this.tableColumnsMd[0]]
  }
  

• 指定列显示：需要显示任意位置的列，直接把对应列的配置放到返回数组中即可，比如要显示第1、3列就返回[this.tableColumnsMd[0], this.tableColumnsMd[2]]。
• 原有字段兼容：你之前在列配置里写的show字段如果需要保留，也可以结合宽度判断给每个列动态设置show值，再过滤show===true的列即可，本质和直接过滤数组逻辑一致。

内容的提问来源于stack exchange，提问作者Taiza Moura