schema-transfer.md
5.53 KB
Schema Transfer 方案穿梭框
通过配置JSON Schema的方式快速生成一个穿梭框，与常规穿梭框不同的是，本穿梭框是表格型穿梭框。
ca99566ededb524501f58b6ab87d6f9b3100a8cd/examples/views/docs/component/schema-transfer.md#">基础用法
一个展示内容更多的表格形式的下拉选择器，基本配置项与z-schema-page中schema相同。
::: snippet source设置数据源, titles设置标题, value-key设置绑定值主键，默认为id。
<template>
<z-schema-transfer v-model="model" :schema="schema" :titles="titles" :source="source" value-key="id" size="small"></z-schema-transfer>
</template>
<script>
export default {
data() {
return {
model: [],
source: [
{ id: '0', name: '姓名0', age: 17 },
{ id: '1', name: '姓名1', age: 26 },
],
titles: ['左边数据源', '右边已选中'],
schema: {
table: {
items: [
{ label: '姓名', prop: 'name', minWidth: 120 },
{ label: '年龄', prop: 'age', minWidth: 120 },
{ label: '地址', prop: 'address', minWidth: 120 },
]
},
},
}
},
}
</script>
:::
ca99566ededb524501f58b6ab87d6f9b3100a8cd/examples/views/docs/component/schema-transfer.md#">远程搜索
数据源支持远程搜索。
::: snippet api-search设置查询方法，返回值格式与z-schema-page相同。
<template>
<z-schema-transfer v-model="model" :schema="schema" :value-filter.sync="filterModel" value-key="id" size="small" :api-search="searchAPI" auto></z-schema-transfer>
</template>
<script>
export default {
data() {
return {
model: [],
filterModel: { name: '' },
schema: {
filter: {
items: [
{ is: 'el-input', label: '姓名', prop: 'name' },
]
},
table: {
items: [
{ label: '姓名', prop: 'name', minWidth: 120 },
{ label: '年龄', prop: 'age', minWidth: 120 },
{ label: '地址', prop: 'address', minWidth: 120 },
]
},
},
}
},
methods: {
searchAPI(params) {
console.log('search', params);
return new Promise(resolve => {
setTimeout(() => {
const list = [
{ id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
{ id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
{ id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
{ id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
{ id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
]
resolve([list, 37]);
}, 500);
});
},
}
}
</script>
:::
ca99566ededb524501f58b6ab87d6f9b3100a8cd/examples/views/docs/component/schema-transfer.md#">选中表格配置
可以单独配置已选中的表格
::: snippet schema中设置selected，格式与z-schema-table相同。
<template>
<z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small"></z-schema-transfer>
</template>
<script>
export default {
data() {
return {
model: [],
source: [
{ id: '0', name: '姓名0', age: 17 },
{ id: '1', name: '姓名1', age: 26 },
],
schema: {
table: {
items: [
{ label: '姓名', prop: 'name', minWidth: 120 },
{ label: '年龄', prop: 'age', minWidth: 120 },
{ label: '地址', prop: 'address', minWidth: 120 },
]
},
selected: {
props: { border: true, editable: true },
items: [
{ label: '姓名', prop: 'name', minWidth: 120, editable: false },
{ label: '年龄', prop: 'age', minWidth: 120, editalways: true },
{ label: '地址', prop: 'address', minWidth: 120 },
]
}
},
}
},
}
</script>
:::
ca99566ededb524501f58b6ab87d6f9b3100a8cd/examples/views/docs/component/schema-transfer.md#">自定义内容
在不满足业务需求的情况下，可以设置插槽自定义左右内容
::: snippet 默认插槽default表示数据源，插槽selected表示已选中的内容
<template>
<z-schema-transfer v-model="model" :schema="schema" :source="source" value-key="id" size="small">
<template #title-left>未选择 <i class="el-icon-minus"></i></template>
<template #default="{ onChoose, valueFormatter }">
<div>
<el-button size="mini" v-for="item in valueFormatter(source)" @click="onChoose(item)">{{ item.name }}</el-button>
</div>
</template>
<template #title-right>已选择 <i class="el-icon-check"></i></template>
<template #selected="{ onRemove }">
<div>
<el-button size="mini" v-for="item in model" @click="onRemove(item)">{{ item.name }}</el-button>
</div>
</template>
</z-schema-transfer>
</template>
<script>
export default {
data() {
return {
model: [],
source: [
{ id: '0', name: '姓名0', age: 17 },
{ id: '1', name: '姓名1', age: 26 },
],
schema: {
table: {
items: [
{ label: '姓名', prop: 'name', minWidth: 120 },
{ label: '年龄', prop: 'age', minWidth: 120 },
{ label: '地址', prop: 'address', minWidth: 120 },
]
},
selected: {
props: { border: true, editable: true },
items: [
{ label: '姓名', prop: 'name', minWidth: 120, editable: false },
{ label: '年龄', prop: 'age', minWidth: 120, editalways: true },
{ label: '地址', prop: 'address', minWidth: 120 },
]
}
},
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- schema | JSON Schema配置项列表 | Array | - | []