Vue 3实现表格动态添加多个自定义类的方法求助

调整数据结构 #

把你期望的数组结构优化得更易维护，每个条目明确对应样式名称、CSS类和激活状态：

data() {
  return {
    tableStyleOptions: [
      { label: "紧凑表格", cssClass: "table-sm", active: false },
      { label: "带边框表格", cssClass: "table-bordered", active: false },
      { label: "条纹表格", cssClass: "table-striped", active: false }
    ]
  };
}

优化模板代码 #

不用单独写@change方法，直接用v-model绑定每个选项的激活状态，勾选变化会自动同步：

<!-- 样式控制开关组 -->
<div v-for="(option, index) in tableStyleOptions" :key="index" class="form-check form-switch mb-2">
  <input v-model="option.active" type="checkbox" class="form-check-input" :id="`table-style-${index}`">
  <label class="form-check-label" :for="`table-style-${index}`">
    {{ option.label }}
  </label>
</div>

<!-- 表格标签 -->
<table class="table table-hover align-middle mb-0" :class="activeTableClasses">
  <!-- 表格内容 -->
</table>

用计算属性动态生成类数组 #

添加计算属性自动筛选激活状态的CSS类，不用手动拼接字符串，Vue会自动响应数据变化更新类名：

computed: {
  activeTableClasses() {
    return this.tableStyleOptions
      .filter(option => option.active)
      .map(option => option.cssClass);
  }
}

本地存储自动同步 #

添加监听逻辑，样式选项变化时自动存到localStorage，页面加载时恢复之前的选择：

mounted() {
  // 页面加载时读取本地存储的状态
  const savedStyles = localStorage.getItem("tableStyles");
  if (savedStyles) {
    this.tableStyleOptions = JSON.parse(savedStyles);
  }
},
watch: {
  tableStyleOptions: {
    deep: true, // 监听数组内对象的属性变化
    handler(newVal) {
      localStorage.setItem("tableStyles", JSON.stringify(newVal));
    }
  }
}

完整组件代码 #

整合所有部分后的完整代码：

<template>
  <div>
    <!-- 样式控制开关 -->
    <div v-for="(option, index) in tableStyleOptions" :key="index" class="form-check form-switch mb-2">
      <input v-model="option.active" type="checkbox" class="form-check-input" :id="`table-style-${index}`">
      <label class="form-check-label" :for="`table-style-${index}`">
        {{ option.label }}
      </label>
    </div>

    <!-- 表格 -->
    <table class="table table-hover align-middle mb-0" :class="activeTableClasses">
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容1</td>
          <td>内容2</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableStyleOptions: [
        { label: "紧凑表格", cssClass: "table-sm", active: false },
        { label: "带边框表格", cssClass: "table-bordered", active: false },
        { label: "条纹表格", cssClass: "table-striped", active: false }
      ]
    };
  },
  computed: {
    activeTableClasses() {
      return this.tableStyleOptions
        .filter(opt => opt.active)
        .map(opt => opt.cssClass);
    }
  },
  mounted() {
    const savedState = localStorage.getItem("tableStyles");
    if (savedState) {
      this.tableStyleOptions = JSON.parse(savedState);
    }
  },
  watch: {
    tableStyleOptions: {
      deep: true,
      handler(val) {
        localStorage.setItem("tableStyles", JSON.stringify(val));
      }
    }
  }
};
</script>

关键说明 #

• 新增样式只需在tableStyleOptions数组里加一条数据，不用修改模板，扩展性强
• 计算属性自动处理类的筛选与生成，避免手动操作字符串拼接的麻烦
• 深度监听数组变化，确保状态修改后自动同步到本地存储，页面刷新后保留用户选择

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