elementui select可创建数据并localStorage存储

最新推荐文章于 2023-06-01 17:41:01 发布

团子爸

最新推荐文章于 2023-06-01 17:41:01 发布

阅读量727

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/wx254418276/article/details/109247915

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<template>
			  <el-select
				ref="select"
				v-model="value"
				filterable
				allow-create
				default-first-option
				@keyup.enter.native="change"
				placeholder="请选择文章标签">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			  </el-select>
			</template>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data () {
					return {
						// apiArray: [{ // 接口返回的选项内容
						//   value: 'HTML',
						//   label: 'HTML'
						// }, {
						//   value: 'CSS',
						//   label: 'CSS'
						// }, {
						//   value: 'JavaScript',
						//   label: 'JavaScript'
						// }],
						value: [],
						addArray: [], // 输入的新数组
						options: [] // 页面调用的select数组
					}
				},
				created() {
					this.options = localStorage.getItem('options') === null ? [] : JSON.parse(localStorage.getItem('options'))
				},
				methods: {
					change() {
						this.addArray.push({
							value: this.$refs.select.createdLabel,
							label: this.$refs.select.createdLabel
						})
						this.options = this.addArray
						localStorage.setItem('options', JSON.stringify(this.options))
					}
				}
			})
		</script>
	</body>
</html>

团子爸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
elementui select可创建数据并localStorage存储

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt.
复制链接

扫一扫