前端通过elementui写一个用户可以通过穿梭框选择字段的表格

好的，我可以为您提供一个简单的示例代码，您可以参考后进行修改。首先，您需要在页面中引入Element UI的CSS和JS文件：

<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

然后，您可以在Vue组件中使用`el-transfer`组件，代码如下：

<template>
  <div>
    <el-transfer
      v-model="selectedFields"
      :data="fields"
      :titles="['可选字段', '已选字段']"
      :filterable="true"
      format="id"
      :props="{
        key: 'id',
        label: 'name',
        disabled: 'disabled'
      }"
    ></el-transfer>
    <el-table :data="tableData">
      <el-table-column v-for="field in selectedFields" :key="field.id" :label="field.name" :prop="field.id"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { id: 1, name: '字段1' },
        { id: 2, name: '字段2', disabled: true },
        { id: 3, name: '字段3' },
        { id: 4, name: '字段4' }
      ],
      selectedFields: [
        { id: 1, name: '字段1' },
        { id: 3, name: '字段3' }
      ],
      tableData: [
        { id: 1, field1: '值1', field3: '值3' },
        { id: 2, field1: '值2', field3: '值4' }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了`el-transfer`组件来实现穿梭框，`el-table`组件来显示表格数据。`selectedFields`是一个数组，表示已选中的字段，`fields`是一个数组，表示所有可选的字段。`el-transfer`组件的`data`属性绑定到`fields`，`v-model`属性绑定到`selectedFields`，`props`属性设置了`key`、`label`和`disabled`三个字段的映射关系，`format`属性设置了`id`作为数据格式。`el-table-column`组件的`v-for`指令遍历`selectedFields`，动态生成表格列，`:key`属性绑定到字段的`id`，`:label`属性绑定到字段的`name`，`:prop`属性绑定到字段的`id`。最终，我们将`tableData`绑定到`el-table`组件的`data`属性中，就可以显示表格数据了。

希望这个示例代码能够对您有所帮助，如果您有任何问题，欢迎随时提出。