vue3+elementui实现表格样式可配置

在Vue 3和Element UI中实现表格样式配置，可以通过动态绑定Element UI的属性来实现。以下是一个简单的例子，展示如何根据配置动态改变表格的样式。

<template>
  <el-table
    :data="tableData"
    :border="tableStyle.border"
    :stripe="tableStyle.stripe"
  >
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    ></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
  // ... more data
]);
 
const tableColumns = ref([
  { prop: 'date', label: 'Date', width: '180' },
  { prop: 'name', label: 'Name', width: '180' },
  { prop: 'address', label: 'Address', width: '300' },
]);
 
const tableStyle = ref({
  border: true,
  stripe: true
});
</script>

在这个例子中，tableData和tableColumns分别用于定义表格的数据和列信息，而tableStyle用于控制表格的样式，比如是否显示边框(border)和是否启用条纹(stripe)。这些样式都是通过Vue的响应式系统动态绑定到Element UI的<el-table>和<el-table-column>组件上。

用户可以通过界面来配置tableStyle对象，从而实现表格样式的动态修改。例如，可以提供复选框让用户选择是否启用边框或条纹。

<template>
  <el-form :model="tableStyle">
    <el-form-item label="是否显示边框">
      <el-switch v-model="tableStyle.border"></el-switch>
    </el-form-item>
    <el-form-item label="是否启用条纹">
      <el-switch v-model="tableStyle.stripe"></el-switch>
    </el-form-item>
  </el-form>
  <!-- 表格组件 -->
</template>

用户通过在<el-form>中切换开关来控制表格样式。这样，表格的外观就可以根据用户的配置实时变化。