Element Plus封装el-dialog、el-table、el-select表格对话框，实现单选多选场景。

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="600px"
    @close="handleClose"
  >
    <el-table
      :data="tableData"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
    </el-table>
    <template #footer>
      <span>
        已选择
        <el-select
          v-model="selected"
          multiple
          placeholder="请选择"
          style="width: 200px; margin-left: 10px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      title: '选择用户',
      visible: false,
      tableData: [], // 表格数据
      selected: [], // 已选择的项
      options: [], // 下拉列表选项
    };
  },
  methods: {
    handleClose() {
      // 关闭时的逻辑
    },
    handleSelectionChange(selection) {
      // 选择变化时的逻辑
    },
    submit() {
      // 提交时的逻辑
      this.visible = false;
    },
  },
};
</script>

这个代码实例展示了如何在Vue中使用Element Plus组件库创建一个带有el-dialog、el-table和el-select的对话框。在对话框中，用户可以通过el-table进行多选操作，并且在底部有一个el-select来展示和控制已选择的项。这个例子简洁明了，并且包含了基本的逻辑处理函数，可以作为封装Element Plus组件的一个基本参考。