城市选择组件

components/news.vue

+<template>
+	<div>
+		<span class="choose-title">城市</span>
+		<el-select v-model="city" clearable placeholder="请选择">
+			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+		</el-select>
+		<span class="choose-title time">时间</span>
+		<el-date-picker v-model="time" type="month" placeholder="选择月"></el-date-picker>
+	</div>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			options: [
+				{
+					value: '选项1',
+					label: '黄金糕'
+				},
+				{
+					value: '选项2',
+					label: '双皮奶'
+				},
+				{
+					value: '选项3',
+					label: '蚵仔煎'
+				},
+				{
+					value: '选项4',
+					label: '龙须面'
+				},
+				{
+					value: '选项5',
+					label: '北京烤鸭'
+				}
+			],
+            city: '', //选择城市
+            time:'',//时间
+		}
+	}
+}
+</script>
+<style scoped>
+.choose-title {
+	font-size: 14px;
+	margin-right: 20px;
+}
+
+.el-select,.el-date-editor {
+	width: 300px;
+	border: 1px solid #eee;
+}
+.time {
+	margin-left: 30px;
+}
+</style>
\ No newline at end of file