<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="app">
<!-- 基础用法:Transfer 的数据通过 data 属性传入。数据需要是一个对象数组,
每个对象有以下属性:key 为数据的唯一性标识,label 为显示文本,
disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量,
值为数据项的 key 所组成的数组。当然,如果希望在初始状态时目标列表不为空,
可以像本例一样为 v-model 绑定的变量赋予一个初始值。 -->
<!-- <el-transfer v-model="value" :data="data"></el-transfer> -->
<!-- 可搜索:设置 filterable 为 true 即可开启搜索模式。默认情况下,
若数据项的 label 属性包含搜索关键字,则会在搜索结果中显示。
你也可以使用 filter-method 定义自己的搜索逻辑。filter-method 接收一个方法,
当搜索关键字变化时,会将当前的关键字和每个数据项传给该方法。若方法返回 true,
则会在搜索结果中显示对应的数据项 -->
<el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="请输入城市拼音"
v-model="value1"
:data="data">
</el-transfer>
</div>
<script>
new Vue({
el:'.app',
data() {
const generateData = _ => {
const data = [];
// for (let i = 1; i <= 15; i++) {
// data.push({
// key: i,
// label: `备选项 ${ i }`,
// disabled: i % 4 === 0
// });
// }
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
cities.forEach((city, index) => {
data.push({
label: city,
key: index,
pinyin: pinyin[index]
});
});
return data;
};
return {
data: generateData(),
value: [1, 4],
value1: [],
filterMethod(query, item) {
return item.pinyin.indexOf(query) > -1;
}
};
}
})
</script>
</body>
</html>
要素転送
おすすめ
転載: blog.csdn.net/Lemontree_fu/article/details/94544067
おすすめ
ランキング