SZYGM1.0/src/components/tableColumnSet/index.vue

<template>
  <Dialog :flag="dialogVisible" msgTitle="列设置" width="1080px" @submitForm="submitForm" @resetForm="resetForm">
    <div class="columnSet">
        <el-checkbox v-for="(item,index) in tableHeaderList" :key="index" :label="item.columnName" v-model="item.needShow" :checked="item.needShow">
          {{item.columnLabel}}
        </el-checkbox>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import Dialog from "@/components/dialog/index.vue";
import { ref } from "vue";

const props = defineProps({
  columnList:{
    type: Array,
    default: []
  },
  dialogVisible: {
    type: Boolean,
    required: true,
  },
});

const tableHeaderList = ref([])

watchEffect(() => {
  tableHeaderList.value= JSON.parse(JSON.stringify(props.columnList))
})

const submitForm=()=>{
  emit('setColumn',tableHeaderList.value)
}

const resetForm=()=>{
  emit('closeDialog',false)
}


const emit = defineEmits(['setColumn','closeDialog'])

</script>

<style lang="scss" scoped>
.columnSet {
  padding: 0 25px;
  box-sizing: border-box;
    .el-checkbox{
      width: calc(25% - 30px);
      margin-top: 20px ;
    }
}
</style>