Ant Design Vue教程
Ant Design Vue AutoComplete 自定义前端筛选函数filterOption
Ant Design Vue AutoComplete 自动完成组件可以通过filterOption方法来自定义前端筛选函数按自己的需要来筛选结果。
filterOption用法
node.js webpack开发方式
需要用到dataSource和filterOption属性
<template>
<a-auto-complete
:dataSource="dataSource"
style="width: 200px"
placeholder="输入1或者2看看"
:filterOption="filterOption"
/>
</template>
<script>
export default {
data() {
return {
dataSource: ['1', '2', '3', '20', '300'],
};
},
methods: {
filterOption(input, option) {
return (
parseInt(option.componentOptions.children[0].text) >= parseInt(input)
);
},
},
};
</script>浏览器方式
需要用到data-source和filter-option属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ant Design Vue AutoComplete 自定义前端筛选函数例子</title>
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
<link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<style>
body {
padding-top: 10px
}
.ant-pagination-item-link.red {
color: red;
padding-left: 6px;
padding-right: 6px;
}
</style>
</head>
<body>
<div id="app">
<a-auto-complete
:data-source="dataSource"
style="width: 200px"
placeholder="输入1或者2看看"
:filter-option="filterOption"
/>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
dataSource: ['1', '2', '3', '20', '300'],
};
},
methods: {
filterOption(input, option) {
return (
parseInt(option.componentOptions.children[0].text) >= parseInt(input)
);
},
},
});
</script>
</body>
</html>例子