element-plus 动态添加

element-plus 中动态添加 icon 的方式有多种。一种方式是使用 is attribute，将元素替换为 Vue 组件进行渲染。例如，可以使用 `<component :is="icon" style="width: 20px; height:20px;"/>` 来动态渲染不同的 icon。

另一种方式是直接使用类名来实现动态添加 icon。例如，可以使用 `<i class="el-icon-edit"></i>` 来添加一个具体的 icon。

对于 element-plus 的 icon，如果需要动态渲染时使用 svg 图片，可以使用 Vue 3 中的 :is。例如，可以使用 `<el-icon><apple /></el-icon>` 来渲染一个单一固定的 icon。

相关问题

element-plus动态添加表单项

要动态添加表单项，你可以使用 Element Plus 提供的动态表单组件。以下是一个示例代码，演示了如何使用 Element Plus 的动态表单组件来实现动态添加表单项：

<template>
  <div>
    <el-form :model="form" ref="dynamicForm">
      <el-form-item v-for="(item, index) in form.items" :key="index">
        <el-input v-model="item.value" placeholder="Enter a value"></el-input>
        <el-button @click="removeFormItem(index)" icon="el-icon-delete"></el-button>
      </el-form-item>
    </el-form>
    <el-button @click="addFormItem" icon="el-icon-plus"></el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        items: [] // 表单项数组
      }
    };
  },
  methods: {
    addFormItem() {
      this.form.items.push({ value: "" }); // 添加一个空的表单项
    },
    removeFormItem(index) {
      this.form.items.splice(index, 1); // 移除指定索引的表单项
    }
  }
};
</script>

在上面的示例中，我们通过 `v-for` 指令来遍历 `form.items` 数组，动态渲染表单项。通过点击 "添加" 按钮，可以调用 `addFormItem` 方法来向 `form.items` 数组中添加一个新的表单项。点击每个表单项旁边的 "删除" 按钮，可以调用 `removeFormItem` 方法来移除指定索引的表单项。

这样，你就可以通过 Element Plus 实现动态添加表单项的功能了。记得根据你的实际需求对表单项进行适当的修改和扩展。

vue3 element-plus 动态添加el-select 两级联动 并且不能重复选择

在 Vue3 中，结合 Element Plus 组件库创建动态添加的二级联动 `el-select` 具有不允许重复选择的功能，可以按照以下步骤进行：

1. 首先，安装 Element Plus 和相关的依赖：

npm install element-plus @vue/cli-plugin-element-plus

2. 然后，在 Vue 组件中设置数据结构，用于存储选项并跟踪已选的值，例如：

<template>
  <div ref="selectWrapper">
    <!-- 动态生成的 el-select -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [], // 顶级选项
      subOptions: {}, // 子级选项对象，key为顶级选项的 value，value为子选项数组
      selectedItems: {}, // 已选择的项，key为顶级选项的 value，value为对应的子选项值
    };
  },
  // ...其他生命周期钩子和方法
};
</script>

3. 创建一个方法来动态添加新的 `el-select`，并将选择绑定到 `selectedItems`：

methods: {
  addSelect(parentId) {
    const newSelect = this.$createElement('el-select', {
      v-model: null,
      placeholder: '请选择',
      clearable: true, // 清除按钮
      multiple: false, // 一级联动默认单选
      filterable: true,
    });

    // 添加下拉列表
    const subOptionsList = this.subOptions[parentId] || [];
    subOptionsList.map(subOption => {
      newSelect.append(
        `<el-option :label="${subOption.label}" :value="${subOption.value}"></el-option>`
      );
    });

    // 添加新 select 到 dom
    this.$refs.selectWrapper.append(newSelect);

    // 监听新选中的子选项
    newSelect.addEventListener('select', (e) => {
      if (!this.selectedItems[parentId]) {
        this.selectedItems[parentId] = {};
      }
      this.selectedItems[parentId][e.value] = e.value;
    });
  },
},
// 初始化时添加第一个 select
mounted() {
  const firstOption = this.options.find(option => option.parentId === undefined);
  if (firstOption) {
    this.addSelect(firstOption.id);
  }
},
</script>

4. 使用时，通过数据驱动的方式控制哪些选项可以添加，以及初始化时是否需要自动添加第一个 select。