elementui实现自定义transfer穿梭框

elementui实现自定义transfer穿梭框，默认的穿梭框效果是左边未选中列表选项，右侧已选中列表，若想实现丰富点功能使用默认引入支持不了，可使用 scoped-slot 自定义数据项对穿梭框进行自定义。
默认引入效果：

image.png

自定义效果：

image.png
实例代码：

<template>
  <div>
    <p style="text-align: center; margin: 50px 0 20px">
      使用 scoped-slot 自定义数据项
    </p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="valueSelect"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        @change="handleChange"
        :data="generateData"
      >
        <span slot-scope="{ option }" style="display: flex">
          {{ option.key }} - {{ option.label }}
          <el-date-picker
            v-model="option.dateSelect"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="到期时间"
            style="width: 135px; margin-left: 10px"
            v-if="value4.includes(option.key)"
          >
          </el-date-picker>
          <el-select
            v-model="option.optionSelect"
            placeholder="请选择"
            style="width: 135px; margin-left: 10px"
            v-if="option.key == 1 && value4.includes(option.key)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <el-button class="transfer-footer" slot="left-footer" size="small"
          >操作</el-button
        >
        <el-button class="transfer-footer" slot="right-footer" size="small"
          >操作</el-button
        >
      </el-transfer>
    </div>
  </div>
</template>
<script>
export default {
  name: "wellcome",
  //组件创建
  created() {},
  mounted() {},
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
          valueDate: "",
        });
      }
      return data;
    };
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      generateData: generateData(),
      valueSelect: [1],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
  },
};
</script>
<style lang="less">
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.el-transfer-panel {
  width: 450px !important;
}
.el-input__inner,
.el-input__icon {
  height: 30px;
  line-height: 30px;
}
.el-checkbox {
  margin-bottom: 10px;
}
</style>