|
|
@@ -1,193 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-cascader
|
|
|
- ref="cascaderEle"
|
|
|
- :options="optionList"
|
|
|
- :props="config"
|
|
|
- :filterable="filterable"
|
|
|
- :size="size"
|
|
|
- v-model="choiceEle"
|
|
|
- @change="selectChange"
|
|
|
- popper-class="gy-cascader"
|
|
|
- clearable>
|
|
|
- </el-cascader>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-/**
|
|
|
- * options [{ value: "", label: "", childList: []}]
|
|
|
- * checkStrictly 设置父子节点取消选中关联
|
|
|
- * 获取选中结果 change事件
|
|
|
- * all 是全部
|
|
|
- * size 大小
|
|
|
- * filterable 是否支持筛选
|
|
|
- */
|
|
|
-export default {
|
|
|
- name: 'selsetHeader',
|
|
|
- props: {
|
|
|
- options: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- width: {
|
|
|
- type: Number,
|
|
|
- default: 500
|
|
|
- },
|
|
|
- checkStrictly: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- filterable: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- size: {
|
|
|
- type: String,
|
|
|
- default: "mini"
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- optionList: [],
|
|
|
- lastSelectedList: [],
|
|
|
- choiceEle: [],
|
|
|
- allLength: 0,
|
|
|
- allOptions: [{ value: "all", label: "全部", childList: null }],
|
|
|
- config: {
|
|
|
- multiple: true,
|
|
|
- checkStrictly: false
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- options() {
|
|
|
- this.setData();
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.setData();
|
|
|
- this.config.checkStrictly = this.checkStrictly;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setData() {
|
|
|
- this.optionList = [];
|
|
|
- this.optionList = this.allOptions.concat(this.options);
|
|
|
- this.loopSelectData(this.optionList.slice(1,5));
|
|
|
- // 记录下全部选中时的个数
|
|
|
- this.allLength = this.optionList.length
|
|
|
- console.log(this.allLength)
|
|
|
- this.lastSelectedList = [...this.optionList];
|
|
|
- this.sendInfo();
|
|
|
- },
|
|
|
- selectChange(val) {
|
|
|
- console.log(val)
|
|
|
- let lastHasAll = this.lastSelectedList.find(arr => {
|
|
|
- return arr[0] === 'all';
|
|
|
- });
|
|
|
- let nowHasAll = val.find(arr => {
|
|
|
- return arr[0] === 'all';
|
|
|
- });
|
|
|
- console.log(this.lastSelectedList, lastHasAll, nowHasAll)
|
|
|
- if (lastHasAll && !nowHasAll) {
|
|
|
- // 点击取消了 全选
|
|
|
- // this.clearCascader();
|
|
|
- this.choiceEle = [];
|
|
|
- this.lastSelectedList = [];
|
|
|
- this.$nextTick(() => {
|
|
|
- this.sendInfo();
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!lastHasAll && nowHasAll) {
|
|
|
- this.choiceEle = [];
|
|
|
- // 点击了 全选
|
|
|
- this.loopSelectData(this.optionList);
|
|
|
- this.lastSelectedList = [...this.choiceEle];
|
|
|
- this.$nextTick(() => {
|
|
|
- this.sendInfo();
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- // 当点选了除全部按钮外的所有 选中全部按钮
|
|
|
- if (!nowHasAll && val.length === this.allLength - 1) {
|
|
|
- console.log('all===')
|
|
|
- this.choiceEle = [['all']].concat(this.choiceEle);
|
|
|
- val = [['all']].concat(val);
|
|
|
- }
|
|
|
- // 当全部选项都选中 这时取消了除全部按钮外的一个 去掉选中全部按钮
|
|
|
- if (nowHasAll && val.length < this.allLength) {
|
|
|
- console.log('all===111')
|
|
|
-
|
|
|
- val = val.filter(arr => {
|
|
|
- return arr[0] !== 'all';
|
|
|
- });
|
|
|
- console.log('val', val)
|
|
|
- this.$nextTick(() => {
|
|
|
- this.choiceEle = [...val];
|
|
|
- });
|
|
|
- console.log('this.choiceEle', this.choiceEle)
|
|
|
-
|
|
|
- }
|
|
|
- this.sendInfo();
|
|
|
- this.lastSelectedList = [...val];
|
|
|
- },
|
|
|
- loopSelectData(list, parentNode = []) {
|
|
|
- list.length > 0 &&
|
|
|
- list.forEach((e) => {
|
|
|
- console.log('ee==ee',e)
|
|
|
- let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
|
|
|
- if (e.children && e.children.length > 0) {
|
|
|
- pNode.push(e.value);
|
|
|
- // 当没有关联时 需要每一级都存下
|
|
|
- if (this.checkStrictly) {
|
|
|
- this.choiceEle.push([...pNode]);
|
|
|
- }
|
|
|
- this.loopSelectData(e.children, pNode);
|
|
|
- } else {
|
|
|
- if (parentNode.length > 0) {
|
|
|
- this.choiceEle.push([...parentNode, e.value]);
|
|
|
- } else {
|
|
|
- this.choiceEle.push([e.value]);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- sendInfo() {
|
|
|
- this.$emit('change', this.choiceEle);
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.el-cascader {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.gy-cascader{
|
|
|
- max-width: 500px;
|
|
|
- overflow-x: auto;
|
|
|
- &::-webkit-scrollbar-track-piece {
|
|
|
- background-color: #f8f8f800;
|
|
|
- }
|
|
|
- &::-webkit-scrollbar {
|
|
|
- transition: all 2s;
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: #ebeaef;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- &::-webkit-scrollbar-thumb:hover {
|
|
|
- background-color: #bbb;
|
|
|
- }
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- &::-webkit-scrollbar-corner {
|
|
|
- background-color: rgba(255, 255, 255, 0);
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
Glying