vue + element ui Transfer 穿梭框列表添

<template>
  <el-transfer
    v-model="value4"
    :props="{
      key: 'value',
      label: 'desc'
    }"
    :render-content="renderFunc"
    :data="data3">
  </el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData3 = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            value: i,
            desc: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data3: generateData3(),
        value4: []
      };
    },
    methods: {
      renderFunc(h, option) {
        var _this = this;
        return h(
          'span', {
            attrs: {
              id: option.label
            },
            domProps: {
              innerHTML: option.label
            },
            on: {
              click: function () {
                console.log(option.key)
              }
            }
          }
        );
      }
  
    }
  };
</script>

主要是通过render-content对组件的ui重新渲染
注意点:
render-content属性
renderFunc函数