forked from opentiny/tiny-vue
77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<tiny-transfer
|
|
ref="transferRef"
|
|
v-model="value"
|
|
:render="render"
|
|
:data="data"
|
|
filter-placeholder="请输入城市拼音"
|
|
filterable
|
|
:right-default-checked="['5']"
|
|
:left-default-checked="['1']"
|
|
:props="{ key: 'id', disabled: 'disabled' }"
|
|
:columns="columns"
|
|
:pager-op="pagerOp"
|
|
:show-pager="true"
|
|
:filter-method="filterMethod"
|
|
>
|
|
<template #default="optionData">
|
|
<div>
|
|
<span>{{ optionData.option.key }} - {{ optionData.option.label }}</span>
|
|
</div>
|
|
</template>
|
|
</tiny-transfer>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref } from 'vue'
|
|
import { Transfer as TinyTransfer, Table } from '@opentiny/vue'
|
|
|
|
const getGridData = () => {
|
|
const data = []
|
|
|
|
for (let i = 1; i <= 20; i++) {
|
|
data.push({
|
|
id: i.toString(),
|
|
name: 'GFD科技YX公司' + i,
|
|
area: '华东区' + i,
|
|
disabled: i % 4 === 0
|
|
})
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
const render = ref({
|
|
plugin: Table
|
|
})
|
|
const value = ref(['5', '6', '14', '10', '9', '11', '12'])
|
|
const data = ref(getGridData())
|
|
const columns = ref([
|
|
{
|
|
type: 'index',
|
|
width: '30px'
|
|
},
|
|
{
|
|
type: 'selection',
|
|
width: '30px'
|
|
},
|
|
{
|
|
field: 'name',
|
|
title: '名称'
|
|
},
|
|
{
|
|
field: 'area',
|
|
title: '所属区域'
|
|
}
|
|
])
|
|
const pagerOp = ref({
|
|
pageVO: {
|
|
pageSizes: [10, 20, 30],
|
|
pageSize: 10
|
|
}
|
|
})
|
|
const filterMethod = ref(function filterMethod(query, item) {
|
|
return item.name.includes(query)
|
|
})
|
|
</script>
|