往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。