Element-transfer

<!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>
猜你喜欢
