cv-transfer-table 穿梭框 ¶
简要 ¶
穿梭框
- 表格穿梭框
- 基于element 的可分页表格穿梭框
示例 ¶
::: demo
vue
<template>
<div>
<cv-transfer-table
ref="refTransferBase"
:show-query="true"
:show-pagination="true"
:pagination-call-back="paginationCallBack"
:left-columns="leftColumns"
:title-texts="['待选', '已选']"
:button-texts="['添加', '删除']"
:query-texts="['筛选', '筛选']"
:table-row-key="(row) => row.name"
v-model="tableData"
style="width: 1000px"
>
<!-- 可以使用插槽获取到列信息和行信息，从而进行数据的处理 -->
<template #default="{ scope }">
<div>
<span v-if="scope.col.id === 'gender'">{{ scope.row.gender === '男' ? '男生' : '女生' }}</span>
<span v-else>{{ scope.row[scope.col.id] }}</span>
</div>
</template>
<template #leftCondition="{ scope }">
<el-form-item label="姓名">
<el-input v-model="scope.name" placeholder="姓名" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="scope.age" placeholder="年龄" />
</el-form-item>
</template>
<template #rightCondition="{ scope }">
<el-form-item label="名称">
<el-input v-model="scope.name" placeholder="名称" />
</el-form-item>
</template>
</cv-transfer-table>
<div>v-Model : {{ tableData.length }}</div>
<cv-btn-base @click="handleSave()">保存</cv-btn-base>
<cv-btn-base @click="clearTransfer()">清空</cv-btn-base>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
tableData: [
{ name: '方琼岚', gender: '女', age: 15 },
{ name: '焉彦珺', gender: '女', age: 15 }
],
leftColumns: [
{ label: '姓名', id: 'name', width: '120px' },
{ label: '性别', id: 'gender', width: '120px' },
{ label: '年龄', id: 'age' }
],
data1: [
{ name: '佘寄南', gender: '男', age: 12 },
{ name: '聊夏云', gender: '男', age: 13 },
{ name: '出凌柏', gender: '男', age: 14 },
{ name: '丛琴心', gender: '女', age: 15 },
{ name: '方琼岚', gender: '女', age: 15 },
{ name: '焉彦珺', gender: '女', age: 15 },
{ name: '第凝旋', gender: '女', age: 15 },
{ name: '续文君', gender: '女', age: 15 },
{ name: '独松雪', gender: '女', age: 15 },
{ name: '有念桃', gender: '女', age: 15 },
{ name: '闻人晶瑶', gender: '男', age: 12 },
{ name: '祖震博', gender: '男', age: 13 },
{ name: '史妞妞', gender: '男', age: 14 },
{ name: '天如风', gender: '女', age: 15 },
{ name: '隗飞昂', gender: '女', age: 15 },
{ name: '堵舒', gender: '女', age: 15 },
{ name: '菅芬', gender: '女', age: 15 },
{ name: '疏千风', gender: '女', age: 15 },
{ name: '项虹颖', gender: '女', age: 15 },
{ name: '劳念云', gender: '女', age: 15 },
{ name: '闻凝绿', gender: '男', age: 12 },
{ name: '牧冬莲', gender: '男', age: 13 },
{ name: '楚驰颖', gender: '男', age: 14 },
{ name: '奕丹山', gender: '女', age: 15 },
{ name: '姬孤晴', gender: '女', age: 15 },
{ name: '邛俊晤', gender: '女', age: 15 },
{ name: '悟瑜蓓', gender: '女', age: 15 },
{ name: '桓嘉颖', gender: '女', age: 15 },
{ name: '卿安琪', gender: '女', age: 15 },
{ name: '程宾', gender: '女', age: 15 },
{ name: '答斐', gender: '男', age: 12 },
{ name: '竺琬凝', gender: '男', age: 13 },
{ name: '谷鸿才', gender: '男', age: 14 },
{ name: '牵忆南', gender: '女', age: 15 },
{ name: '飞晓彤', gender: '女', age: 15 },
{ name: '范鸿波', gender: '女', age: 15 },
{ name: '庚经亘', gender: '女', age: 15 },
{ name: '干芮欣', gender: '女', age: 15 },
{ name: '才靖荷', gender: '女', age: 15 },
{ name: '原婧', gender: '女', age: 15 },
{ name: '士霞飞', gender: '男', age: 12 },
{ name: '首雨安', gender: '男', age: 13 },
{ name: '保皛', gender: '男', age: 14 },
{ name: '皇甫文轩', gender: '女', age: 15 },
{ name: '颛孙兴平', gender: '女', age: 15 },
{ name: '水鸾', gender: '女', age: 15 },
{ name: '仉棠', gender: '女', age: 15 },
{ name: '伦昊昊', gender: '女', age: 15 },
{ name: '速晟睿', gender: '女', age: 15 },
{ name: '万俟仪芳', gender: '女', age: 15 },
{ name: '卫孟', gender: '男', age: 12 },
{ name: '仆访波', gender: '男', age: 13 },
{ name: '奚冰海', gender: '男', age: 14 },
{ name: '褚冰香', gender: '女', age: 15 },
{ name: '布凌丝', gender: '女', age: 15 },
{ name: '苦星', gender: '女', age: 15 },
{ name: '钦忆安', gender: '女', age: 15 },
{ name: '姒晓曼', gender: '女', age: 15 },
{ name: '蒉英武', gender: '女', age: 15 },
{ name: '锺晴美', gender: '女', age: 15 },
{ name: '泥元槐', gender: '男', age: 12 },
{ name: '买初珍', gender: '男', age: 13 },
{ name: '秦乾', gender: '男', age: 14 },
{ name: '谭白山', gender: '女', age: 15 },
{ name: '登幻翠', gender: '女', age: 15 },
{ name: '蚁盼夏', gender: '女', age: 15 },
{ name: '居梓莹', gender: '女', age: 15 },
{ name: '中觅风', gender: '女', age: 15 },
{ name: '慈珺琦', gender: '女', age: 15 },
{ name: '谏听云', gender: '女', age: 15 },
{ name: '应鹏煊', gender: '男', age: 12 },
{ name: '驹霁', gender: '男', age: 13 },
{ name: '慕容智纯', gender: '男', age: 14 },
{ name: '可茹薇', gender: '女', age: 15 },
{ name: '夫冰薇', gender: '女', age: 15 },
{ name: '李朋', gender: '女', age: 15 },
{ name: '轩辕萍韵', gender: '女', age: 15 },
{ name: '简沛蓝', gender: '女', age: 15 },
{ name: '粟阳舒', gender: '女', age: 15 },
{ name: '郦高韵', gender: '女', age: 15 }
]
};
},
created() {},
methods: {
handleSave() {
console.log(this.tableData);
},
paginationCallBack(obj) {
// console.log(obj)
console.log('请求下', obj);
let d = this.data1.filter((item, index) => {
if (index >= (obj.pageIndex - 1) * obj.pageSize && index < obj.pageIndex * obj.pageSize) {
return true;
}
return false;
});
return new Promise((resolve, reject) => {
try {
resolve({ total: this.data1.length, data: d });
} catch {
reject();
}
});
},
clearTransfer() {
this.$refs.refTransferBase.clear();
}
}
};
</script>:::
- 如图
属性 ¶
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value / v-model | 绑定值 | array | — |
| show-query | 是否需要显示条件查询 | boolean | false |
| show-pagination | 是否需要显示分页 | boolean | false |
| pagination-call-back | 分页回调，需要使用Promise返回结果 | function(pageIndex, pageSize) | { total: 0, data: null } |
| title-texts | 自定义标题文案 | array | ['待选项', '已选项'] |
| button-texts | 自定义按钮文案 | array | ['',''] |
| query-texts | 自定义查询按钮文案 | array | ['查询','筛选'] |
| left-columns | 左侧表格列定义, 需要属性{ id, label, width } | array | [] |
| right-columns | 右侧表格列定义, 不传时将使用left-columns的值 | array | undefined |
| min-height | 表格最小高度 | string | 300px |
| max-height | 表格最大高度 | string | 500px |
| table-row-key | 表格行数据的Key | function(row) | row.id |
方法 ¶
| 参数 | 说明 | 参数 |
|---|---|---|
| clear | 清除所有的操作后产生的数据 | - |
插槽 ¶
| 名称 | 说明 |
|---|---|
| - | 自定义列的内容，参数为 { row, column } |
| leftCondition | 左表查询条件插槽，可自行添加el-form-item，并绑定值至scope上，名称与字段名需相同 |
| rightCondition | 同上 |