c-el-table-transfer

c-el-table-transfer

基于 element-ui 的表格穿梭框，forked from el-table-transfer, 解决 其暴露 map 文件的问题。

version 0.1.2

增加插槽功能，可自定义列模板（左右两边的列模板都会变化）

version 0.1.3

添加禁用勾选功能，通过传递 selectable 参数（要求为 Function 类型）来进行判断是否可勾选

version 0.1.4

解决多余引入 element 字体文件问题

version 0.1.5

解决 其暴露 map 文件的问题

安装

npm install c-el-table-transfer

使用

在 main.js 文件中引入插件并注册

import elTableTransfer from 'c-el-table-transfer'
Vue.use(elTableTransfer)

在项目中使用 c-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: [
                {label: '姓名', value: 'name', width: '120px'},
                {label: '性别', value: 'gender', width: '120px'},
                {label: '年龄', 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> 

npm 地址： c-el-table-transfer