一个弹窗，在左侧选择商品，右侧展示已选择商品，保存后提交后台，用element ui组件怎么做

在Element UI中创建这样一个功能，可以利用其提供的表格组件和对话框组件来构建。首先，你需要安装Element UI库，然后按照以下步骤操作：

1. 引入组件：

<template>
  <div id="app">
    <!-- 其他内容 -->
    <el-dialog :visible.sync="dialogVisible" width="60%" title="选择的商品">
      <!-- 商品列表部分 -->
      <el-table :data="productList" border>
        <!-- 表格列 -->
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <!-- 可能需要添加选择框或复选框 -->
      </el-table>
      <el-dialog-actions>
        <el-button @click="handleAdd">添加</el-button>
        <el-button type="primary" @click="handleSubmit">保存并提交</el-button>
      </el-dialog-actions>
    </el-dialog>
  </div>
</template>

2. 配置数据和事件处理：

<script>
import { ref, onMounted } from 'vue';
import { ElTable, ElButton } from 'element-plus';

export default {
  setup() {
    const dialogVisible = ref(false); // 弹窗可见状态
    const productList = []; // 商品列表数据

    // 模拟获取商品列表数据
    onMounted(() => {
      // 从后台API或者其他数据源获取产品列表
      getProductList().then(data => (productList = data));
    });

    // 商品表单操作函数
    const handleAdd = () => {
      // 添加新行到表格数据
      productList.push({ name: '', price: '' });
    };

    const handleSubmit = () => {
      // 当用户点击保存并提交，将选中的商品发送给后台
      dialogVisible.value = false; // 关闭弹窗
      const selectedProducts = productList.filter(item => item.selected === true); // 筛选出已选择的商品
      saveToBackend(selectedProducts);
    };

    return {
      dialogVisible,
      productList,
      handleAdd,
      handleSubmit,
    };
  },
  methods: {
    // ...其他可能的方法，如从后台获取数据、保存数据等
  },
};
</script>

在这个例子中，我们假设每个商品都有一个`selected`属性表示是否已被选择。当用户点击"保存并提交"按钮时，我们会过滤出已选择的商品并将其发送到后台。