以下是一个简单的后端到前端的案例代码；

后端代码（使用Java Spring Boot框架）：

@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/data")
    public List<MyData> getData(@RequestParam(required = false) List<String> fields) {
        List<MyData> data = new ArrayList<>();
        // 从数据库或其他数据源获取数据
        // ...
        // 根据前端传来的参数，过滤出需要显示的字段
        if (fields != null && !fields.isEmpty()) {
            data.forEach(d -> {
                Map<String, Object> map = new HashMap<>();
                fields.forEach(f -> map.put(f, d.getFieldValue(f)));
                d.setFields(map);
            });
        }
        return data;
    }
}

前端代码（使用Vue3和Element Plus组件库）：

<template>
  <div>
    <el-select v-model="selectedFields" multiple placeholder="请选择要显示的字段">
      <el-option v-for="field in allFields" :key="field" :label="field" :value="field"></el-option>
    </el-select>
    <el-table :data="tableData">
      <el-table-column v-for="field in selectedFields" :key="field" :prop="field" :label="field"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const allFields = ['field1', 'field2', 'field3', 'field4']; // 所有可选字段
    const selectedFields = ref(['field1', 'field2', 'field3']); // 默认选中的字段
    const tableData = ref([]); // 表格数据

    // 获取数据
    const fetchData = async () => {
      const { data } = await axios.get('/api/data', { params: { fields: selectedFields.value } });
      tableData.value = data;
    };

    // 监听选中的字段变化，重新获取数据
    const handleFieldChange = () => {
      fetchData();
    };

    fetchData(); // 初始化获取数据

    return {
      allFields,
      selectedFields,
      tableData,
      handleFieldChange,
    };
  },
  watch: {
    selectedFields: {
      handler: 'handleFieldChange',
      deep: true,
    },
  },
});
</script>

以上代码仅供参考，具体实现方式可能根据实际情况有所不同。