显示当年,默认为当年
示意图

默认年份为当年
<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
},