企业库工作知识点总结

105 阅读1分钟

显示当年,默认为当年

示意图

image.png

默认年份为当年

<el-form-item label="年份" prop="year">
<el-date-picker v-model="year" format="yyyy" value-format="yyyy" type="year" placeholder="选择年" style="margin-left: 36px" size="small">
</el-date-picker>
   </el-form-item>

解析:

  • format,是显示在输入框中的格式,yyyy代表的是年;
  • value-format,绑定值的格式;
year: new Date().getFullYear() + '',

两个页面的按钮在同一个页面

一个页面加两个组件

一个页面
<template>
<div class="app-container">
<el-radio-group v-model="kind">
   <el-radio-button label="1">行业维度</el-radio-button>
   <el-radio-button label="2">区域维度</el-radio-button>
</el-radio-group>
<el-divider></el-divider>
<industry-index v-show="kind == 1"></industry-index>
<area-index v-show="kind == 2"></area-index>
</div>
</template>
<script>
import AreaIndex from './modules/area-index.vue'
import IndustryIndex from './modules/industry-index.vue'
export default {
	components: { AreaIndex, IndustryIndex },
	data() {
		return {
			kind: 1,
		}
	},
        	filters: {},
	created() {},
	methods: {},
}
</script>
<style scoped less>
.block {
	float: inline-end;
}
</style>

两个子组件

  • 两个组件正常写就可以了

从接口调用多选的数据

<el-form-item label="行业筛选" prop="industryName">
<el-checkbox :indeterminate="isIndustryName" v-model="industryName" @change="handleAllChecked">全选</el-checkbox>
<el-checkbox-group v-model="industryNames" @change="handleItemChecked">
<el-checkbox v-for="(item, index) in listFirstLevel" :label="item.industrycode" :key="index">{{ item.industryname }} </el-checkbox>
</el-checkbox-group>
</el-form-item>
  • 全选:industryName: [],选中的值,都放在这个数组里面,
  • indeterminate,代表全选是否选中的状态,
  • handleItemChecked,选中的操作事项,
    • 要么全部选中,要么为空
//行业全选
 handleAllChecked(val) {
 this.industryNames = val ? this.listFirstLevel.map(item => {
   return item.industrycode }): []
   this.isIndustryName = false
},