8.事件对象

<template>
  <el-table>
    <el-table-column
      prop="name"
      label="Name"
      :fixed="isDesktop ? '' : 'true'"
    ></el-table-column>
    <el-table-column
      prop="age"
      label="Age"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      isDesktop: false
    };
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDeviceType);
  }，
  mounted() {
    this.checkDeviceType();
    window.addEventListener('resize', this.checkDeviceType);
  },
  methods: {
    checkDeviceType() {
      this.isDesktop = window.innerWidth >= 768; // 设置阈值，这里假设大于等于 768px 的宽度为电脑端
    }
  }
};
</script>

<template>
  <el-table>
    <el-table-column
      prop="name"
      label="Name"
      :fixed="isDesktop ? '' : 'true'"
    ></el-table-column>

  // 重复写一遍列字段，在手机端时显示
    <el-table-column
      v-if="!isDesktop"
      prop="name"
      label="Name"
    ></el-table-column>

    <el-table-column
      prop="age"
      label="Age"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>