After iview modal is removed, why can't display modal be triggered again after clicking * close?

Why can"t display modal be triggered again after clicking * close after iview modal is removed?


<Row>
        <Col>
            <see-parts
                :seePartsModalState="seePartsModalState"
                :seePartsTableData="seePartsTableData"
                :seePartsLoading="seePartsLoading"
                @seePartsCancelEvent="seePartsCancelEvent"
            >
            </see-parts>
        </Col>
</Row>

    
<template>
<div>
    <Modal
            :value="seePartsModalState"
            title=""
            :mask-closable="false"
            :closable="false"
            width="800"
    >
        <Table :loading="seePartsLoading" size="small" :columns="seePartsTableHeader" :data="seePartsTableData"></Table>
        <div slot="footer">
            <Button @click="seePartsCancelEvent"></Button>
        </div>
    </Modal>
</div>

< / template >

< script >

export default {
    props: {
        seePartsModalState: {
            type: Boolean,
            default: false
        },
        seePartsLoading: {
            type: Boolean,
            default: false
        },
        seePartsTableData: {
            type: Array
        }
    },
    data () {
        return {
            seePartsTableHeader: [
                {
                    title: "",
                    key: "code",
                    width: 120,
                    align: "center"
                },
                {
                    title: "",
                    key: "sourceCode",
                    width: 120,
                    align: "center"
                },
                {
                    title: "",
                    key: "machineCode",
                    width: 120,
                    align: "center"
                },
                {
                    title: "",
                    key: "machineName",
                    width: 120,
                    align: "center"
                },
                {
                    title: "",
                    key: "workshopName",
                    width: 90,
                    align: "center"
                },
                {
                    title: "",
                    key: "processName",
                    width: 90,
                    align: "center"
                },
                {
                    title: "",
                    key: "auditStateName",
                    width: 90,
                    align: "center"
                }
            ]
        };
    },
    methods: {
        seePartsCancelEvent () {
            this.$emit("seePartsCancelEvent");
        }
    }
};

< / script >
clipboard.png

Mar.10,2022

I ask two questions to see if I can give you some help, ha
1, if closable is set to false, that'x' should not be displayed;
2, seePartsModalState this should be two-way binding in modal, is not the use: value binding is not suitable.


there is something wrong with the structure. Try this

< template >

<Row>
    <Col>
        <Modal
            :value="seePartsModalState"
            :model="modalShow"
            title=""
            :mask-closable="false"
            :closable="false"
            width="800"
        >
            <see-parts
                :seePartsModalState="seePartsModalState"
                :seePartsTableData="seePartsTableData"
                :seePartsLoading="seePartsLoading"
                @seePartsCancelEvent="seePartsCancelEvent"
            >
            </see-parts>
            <div slot="footer"></div>
        </Modal>
    </Col>
</Row>

< / template >
< script >
export default {

data () {
    return {
        modalShow: false,//modalShow
    }
}

}
< / script >

subcomponents SeeParts
< template >

<Table :loading="seePartsLoading" size="small" :columns="seePartsTableHeader" :data="seePartsTableData"></Table>
<div>
    <Button @click="seePartsCancelEvent"></Button>
</div>

< / div >
< / template >

Menu