xiaoshi_system/src/views/components/dialog/fields.vue

<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <div>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checked" @change="handleCheckedChange">
                <el-checkbox v-for="field in filedList" :label="field.value" :key="field.value">{{field.name}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    filedList:{
        type:Array,
        default:[]
    }
  },
  data() {
    return {
        //控制显示弹窗
        dialogVisible:false,
        //是否全选
        isIndeterminate:false,
        //全选
        checkAll:false,
        //选择
        checked:[],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //打开栏位
    open(data){
        this.dialogVisible = true
    },
    //关闭弹窗
    handleClose(){
        this.dialogVisible = false
    },
    //提交更改
    submit(){

    },
    //全选
    handleCheckAllChange(val) {
        this.checked = val ? this.filedList : [];
        this.isIndeterminate = false;
    },
    //勾选
    handleCheckedChange(value){
        let checkedCount =  value.length;
        this.checkAll = checkedCount === this.filedList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>