Element-UI穿梭框去掉左箭头按钮

往vue项目中加入一个穿梭框页面

首先在views目录中创建Transfer.vue文件：

<template>
    <el-transfer
      v-model="value"
      :props="{
        key: 'value',
        label: 'desc'
      }"
      :data="data">
    el-transfer>
  template>
  
  <script>
    import $ from 'jquery'
    export default {
        mounted(){
            console.log('mounted');
            $('.el-transfer__buttons').children().first().remove();
          
        },
      data() {
        const generateData = _ => {
          const data = [];
          for (let i = 1; i <= 15; i++) {
            data.push({
              value: i,
              desc: `备选项 ${ i }`,
              disabled: i % 4 === 0
            });
          }
          return data;
        };
        return {
          data: generateData(),
          value: []
        };
      }
    };
  script>

解释一下上面的代码：等待dom元素加载完成后，在mounted中删除左箭头按钮。左箭头按钮的父元素是el-transfer__buttons,它的第一个孩子是要删除的左箭头按钮。
然后在index.js文件的routes数组中加入路由：

 {
            path: '/transfer',
            name: '骨架',
            component: () =>
                import ('../views/Transfer.vue')
 }

访问localhost:8080/#/transfer便能查看穿梭框页面。

用npm安装jquery

在Terminal中输入命令 npm install jquery --registry=https://registry.npmmirror.com 。
之后在vue文件中使用import $ from 'jquery’导入jquery。