ElementUI transfer组件设置已选中右侧的值

在ElementUI的<el-transfer>组件中，设置已勾选右侧值通常涉及到v-model绑定的数据。以下是一个简单的例子，展示如何设置已勾选右侧值：

<template>
  <el-transfer
    v-model="selectedValues"
    :data="transferData"
    :props="{
      key: 'id',
      label: 'name'
    }"
  ></el-transfer>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [1, 2, 3], // 已勾选的值，这里的数字代表transferData中对象的id
      transferData: [
        { id: 1, name: 'Option 1', disabled: false },
        { id: 2, name: 'Option 2', disabled: false },
        { id: 3, name: 'Option 3', disabled: false },
        // ... 更多选项
      ]
    };
  }
};
</script>

在这个例子中，selectedValues是绑定到<el-transfer>组件的v-model的数组，包含了希望预先勾选到右侧的值。这些值必须与transferData数组中对象的id相匹配。当组件被渲染时，对应的选项将会被自动勾选到右侧。