element 多选列表组件

以下是一个使用 Element UI 实现多选列表组件的示例代码：

<template>
  <el-select v-model="selectedOptions" multiple filterable>
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedOptions: this.value
    };
  },
  watch: {
    selectedOptions: function (newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

这个组件使用 Element UI 的 `el-select` 组件来实现多选列表。它接受一个 `options` 数组作为输入，每个选项包含一个 `value` 和 `label` 属性。它还接受一个 `value` 数组作为默认选中的选项。

在组件中使用 `v-for` 循环遍历 `options` 数组来渲染每个选项。通过使用 `v-model` 指令将 `selectedOptions` 数组绑定到 `el-select` 组件的状态上，以便在选项被选中或取消选中时更新它。

当 `selectedOptions` 数组发生变化时，组件会触发一个名为 `input` 的事件，并传递更新后的数组作为参数。父组件可以通过监听这个事件来获取选中的选项。