使用Ant Design of Vue实现可输入可选择功能

最新推荐文章于 2024-07-15 14:59:04 发布

qq_41780827

最新推荐文章于 2024-07-15 14:59:04 发布

阅读量150

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41780827/article/details/140296575

版权

使用Ant Design of Vue实现可输入可选择功能

组件版本

组件	使用版本
VUE	2.6.11
Ant	1.6.5

a-select方式【完整代码】（开发项目使用版本较老，高版本另行调试）

<!DOCTYPE html>
<!--
参考地址：https://blog.csdn.net/qq_43940789/article/details/132588875
vxe-table在线demo工具：
https://gitee.com/xuliangzhan_admin/vxe-table/issues/I1YQXS
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.11"></script>
	<script src="https://unpkg.com/ant-design-vue@1.6.5/dist/antd.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/ant-design-vue@1.6.5/dist/antd.min.css" media="screen">
	
	<!--
	vue3引用，暂未测试完毕，vue3方法、属性引用不来。主要引用都在下面了。
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://unpkg.com/ant-design-vue@3"></script>
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/ant-design-vue@3/dist/antd.min.css" media="screen">
	<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
	-->
</head>

<body>
<div id="app">
    <template>
		<a-form :form="form">
			<a-form-item :label="'单位'" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }" class="basicFormItem">
			  <a-select
				allowClear
				show-search
				v-decorator="['unit', { initialValue: model.unit ,rules: [{ required: false, message: '请输入' }]}]"
				placeholder="请输入"
				style="width: 100%"
				:default-active-first-option="false"
				:show-arrow="false"
				:filter-option="true"
				:autoClearSearchValue="false"
				:not-found-content="'暂无数据'"
				@search="searchInpput"
				@change="changeInpput"
				@blur="blurInpput"
			  >
				<a-select-option v-for="d in unitData" :value="d.value" :key="d.value">
				  {{ d.text }}
				</a-select-option>
			  </a-select>
			</a-form-item>
		</a-form>
    </template>
</div>
</body>
</html>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                model:{},
				unitData:[
					{value:'小时',text:'小时'},
					{value:'天',text:'天'},
					{value:'周',text:'周'},
					{value:'月',text:'月'},
				],
				form: this.$form.createForm(this),
            }
        },
        computed: {

        },
        created() {
        },
        watch: {

        },
        mounted() {
        },
        methods: {
			searchInpput(value) {
			  console.log("searchInpput:",value);
			  this.changeInpput(value);
			},
			changeInpput(value) {
			  console.log("changeInpput:",value);
			  if(value){
				this.form.setFieldsValue({unit:value})
			  }
			},
			blurInpput(value) {
			  console.log("blurInpput:",value);
			  if(value){
				this.model.unit = value;
				this.form.setFieldsValue({unit:value})
				// let f = this.unitData.find((r)=>{
				//   return  r.value === value;
				// })
				// 临时数据暂不保存
				// if(!f) this.unitData.push({text:value,value:String(value)});
			  }
			  // console.log("unit",this.model.unit);
			},
        }
    })

</script>