vue3里面，如何实现穿梭框自定义重置按钮，点击重置按钮可以清空左侧已选中的数据

下图是Element UI的穿梭框，要实现的是点击“重置”按钮，清空左侧已选择的“备选项”。

设置left-default-checked属性绑定data的leftCheckValues。
操作按钮绑定click方法leftFooter，leftFooter方法中将leftCheckValues设置为空。

<template>
    <div>
        <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value"
        filterable
        :left-default-checked="leftCheckValues"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="data">
        <el-button class="transfer-footer" slot="left-footer" size="small" @click="leftFooter">重置</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
      </el-transfer>
    </div>
   
    </div>
  </template>
  
  <style>
    .transfer-footer {
      margin-left: 20px;
      padding: 6px 5px;
    }
  </style>
  
  <script>
    export default {
      data() {
        const generateData = _ => {
          const data = [];
          for (let i = 1; i <= 15; i++) {
            data.push({
              key: i,
              label: `备选项 ${ i }`,
              disabled: i % 4 === 0
            });
          }
          return data;
        };
        return {
          data: generateData(),
          value: [1],
          value4: [1],
          leftCheckValues:[5,6],
          renderFunc(h, option) {
            return <span>{ option.key } - { option.label }</span>;
          }
        };
      },
  
      methods: {
        leftFooter(){
            this.leftCheckValues=[]
        },
        handleChange(value, direction, movedKeys) {
          console.log(value, direction, movedKeys);
        }
      }
    };
  </script>

同理，右侧的“操作”按钮也能改成“重置”按钮。