基于element-ui的表格穿梭框
增加插槽功能,可自定义列模板(左右两边的列模板都会变化)
添加禁用勾选功能,通过传递selectable参数(要求为Function类型)来进行判断是否可勾选
解决多余引入element字体文件问题
npm install el-table-transfer
在main.js文件中引入插件并注册
import elTableTransfer from 'el-table-transfer'
Vue.use(elTableTransfer)
在项目中使用el-table-transfer
<template>
<div id="app">
<el-table-transfer
leftTitle="总数据"
rightTitle="已选数据"
:columns='columns'
:dataLeft="data1"
:dataRight="data2"
>
<!-- 可以使用插槽获取到列信息和行信息,从而进行数据的处理 -->
<template v-slot:default="{scope}">
<div>
<span v-if="scope.col.value === 'gender'">{{scope.row.gender === '男' ? '♂' : '♀'}}</span>
<span v-else>{{scope.row[scope.col.value]}}</span>
</div>
</template>
</el-table-transfer>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
columns: [
{name: '姓名', value: 'name', width: '120px'},
{name: '性别', value: 'gender', width: '120px'},
{name: '年龄', value: 'age',},
],
data1: [
{name: '张三', gender: '男', age: '18'},
{name: '李四', gender: '男', age: '18'},
{name: '王五', gender: '男', age: '18'},
{name: '乙亥', gender: '男', age: '18'},
],
data2: [
{name: '帕克', gender: '女', age: '18'},
{name: '克里斯蒂娜', gender: '女', age: '18'},
]
}
},
// components: {
// 'el-table-transfer': elTableTransfer
// }
}
</script>