hemall.terabimsoft.com.cn/plugins/shop-statistics/views/backend/field_dialog.blade.php

<template id="fieldDialog">
  <el-dialog
    :visible.sync="fieldDialogVisible"
    :show-close="false"
    :before-close="saveFile"
    center
    width="43%">
    <div class="field-card"><span class="field-card-cop">选择列表字段</span> <span  class="field-card-num">(一次最多可以选择6个)</span></div>
    <div class="field-item">
      <el-checkbox-group v-model="checkFielList" @change="changeCheckFile">
        <el-checkbox :label="item" v-for="(item,index) in income_comment" :key="index" class="el-checkbox-item" :disabled="item.state"><span class="field-item-content">[[item.title]]</span></el-checkbox>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveFile('')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  Vue.component('fieldDialog',{
    delimiters: ['[[', ']]'],
    props:{
      fieldDialogVisible:{
        type:Boolean,
        default:false
      },
      income_comment:{
        type: Array,
        default:()=>[]
      },
      choose_income:{
        type:Array,
        default:()=>[]
      },
      selectFielList:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return {
        checkFielList:[],
      }
    },
    mounted() {
      this.changeCheckFile(this.selectFielList)
      this.checkFielList = this.selectFielList
    },
    methods: {
      saveFile(data){
          this.$emit('checkfiellist',{
            data: !data ? this.checkFielList : "",
            status:false
          })
      },
      changeCheckFile(data){
        if(data.length >= 6){
          let newArray = this.income_comment.filter((item) => !data.some((item2) => item2.type === item.type));
          for(let item of newArray){
            item.state = true
          }
          for(let item of this.income_comment){
            for(let el of newArray){
              if(item.type == el.type){
                item = el
              }
            }
          }
        }else{
          for(let item of this.income_comment){
            item.state = false
          }
        }
      }
    },
    template:"#fieldDialog",
  })
</script>
<style>
.el-dialog--center .el-dialog__body {
  padding: 30px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.el-dialog__header {
  padding:0;
}
.field-card {
  margin-bottom: 37px;
}
.field-card-cop {
  font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 2px;
	color: #1f1f1f;
}
.field-card-num {
  font-size: 18px;
	font-weight: normal;
	letter-spacing: 2px;
	color: #6c6c6c;
  margin-left: 10px;
}

.el-checkbox-group {
  margin-left: 72px;
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  overflow-y: auto;
}

.el-checkbox {
  width: 25%;
  margin-bottom: 26px;
  display: flex;
}

.el-checkbox-group:after {
  content: "";
  width: 25%;
  height: 0px;
  visibility: hidden;
}

.field-item-content {
  font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 48px;
	letter-spacing: 1px;
	color: #333333;
  margin-left: 10px;
  width: 100%;
  white-space: break-spaces;
  line-height: 1;
  display: flex;
}

.el-checkbox__inner {
  zoom: 1.5;
}

.el-checkbox__label {
  width: 100%;
}
</style>