DWQA QuestionsCategory: Development ToolThe Popover pop-up box of element UI is set with the V-model attribute to determine whether the pop-up box does not appear, but the console does not report an error
Hello tomorrow asked 2 months ago

There is a requirement in the project. If I want to directly click a column on the row of the table to directly implement the change, I use the Popover pop-up box of the element UI framework, and then click the button when setting V-model = “visible2”, which is false by default. The Popover pop-up box does not appear. If the attribute of V-model is not set, click it to appear. I don’t know why? Directly copying the code of the official website is the same problem. Who can give you advice?

< El table column label = "quantity" width = "80" >
    <template slot-scope="scope">
        <el-popover  ref="popover4"  placement="top" width="160" trigger="click">
            <el-input v-model="scope.row.quantity"></el-input>
            <div style="margin-top:10px">
                < El button size = "mini" style = "float: left" @ Click = "cancelchange" > cancel < / El button >
                < El button size = "mini" type = "primary" style = "float: right" @ Click = "confirmchange (scope. $index, cart_list)" > confirm < / El button >
            </div>
        </el-popover>
        <el-button  v-popover:popover4 type="text" style="width:40px">         
            {{scope.row.quantity}}  
        </el-button>
    </template>
</el-table-column>
data() {
    return {
        selectForm: {
            itemcode: '',
            itemname: '',
            distnumber: '',
            quantity: 1,
        },
        rules:{
            distnumber:[
                {pattern: / ^ [0-9a-za_z] + $/, message: 'only numbers and English can be entered', trigger: 'blur'}
            ],
            quantity:[
                {type: 'number', message: 'only numbers can be entered. If it is empty, it defaults to 1'}
            ]
        },
        listLoading: false,
        cart_list: [],
        EditCartPre: true,
        EditCartAfter: false,
        EditBtn: true,
        confirmBtn: false,
        visible2:false
    };
},

,Give me a piece of advice. The next time you ask a question, the posted code must be arranged in a good version, otherwise you won’t be in the mood to answer when you look at such a messy code. I’ve manually rearranged the code for you.

Get to the point.
The Popover in the element UI can be used in addition tov-popoverIn addition to binding, there is another way to implement it. If you look at the document a little carefully, you can certainly see the contents in the figure below.
clipboard.png
What’s in the pictureslot=referenceCan be used. Like the code in your problem, you can write it like this.

<template slot-scope="scope">
    <el-popover placement="top" width="160" trigger="click">
        <el-input v-model="scope.row.quantity"></el-input>
        <div style="margin-top:10px">
            <el-button size="mini" style="float:left" 
                @Click = "cancelchange" > cancel < / El button >
            <el-button size="mini" type="primary" 
                style="float:right" 
                @Click = "confirmchange (scope. $index, cart_list)" > confirm < / El button >
        </div>
        <el-button slot="reference" type="text" style="width:40px">         
            {{scope.row.quantity}}  
        </el-button>
    </el-popover>
</template>
1 Answers
zollero answered 2 months ago

Give me a piece of advice. The next time you ask a question, the posted code must be arranged in a good version, otherwise you won’t be in the mood to answer when you look at such a messy code. I’ve manually rearranged the code for you.

Get to the point.
The Popover in the element UI can be used in addition tov-popoverIn addition to binding, there is another way to implement it. If you look at the document a little carefully, you can certainly see the contents in the figure below.
clipboard.png
What’s in the pictureslot=referenceCan be used. Like the code in your problem, you can write it like this.

<template slot-scope="scope">
    <el-popover placement="top" width="160" trigger="click">
        <el-input v-model="scope.row.quantity"></el-input>
        <div style="margin-top:10px">
            <el-button size="mini" style="float:left" 
                @Click = "cancelchange" > cancel < / El button >
            <el-button size="mini" type="primary" 
                style="float:right" 
                @Click = "confirmchange (scope. $index, cart_list)" > confirm < / El button >
        </div>
        <el-button slot="reference" type="text" style="width:40px">         
            {{scope.row.quantity}}  
        </el-button>
    </el-popover>
</template>
Hello tomorrow replied 2 months ago

Thank you. Remember your teachings. You will never make the mistake of uneven typesetting again in the future

Chang Rui replied 2 months ago

Previously, click confirm and cancel to hide by v-module. If this is changed, how can you hide the contents of this Popover by clicking confirm and cancel now

Chang Rui replied 2 months ago

Can you answer in a hurry? I haven’t found a solution for a long time. Thank you, great gods

zollero replied 2 months ago

After reading the source code,el-popoverThere is one waydoCloseYou can try. adoptrefReference toel-popoverComponent, calling method.

Chang Rui replied 2 months ago

Thank you!

Question 667 replied 2 months ago

Thanks to the boss, I hate reading the source code. After that, I can directly display the method properties of the object referenced by ref on the console. Thank you. What I’ve been looking for is doshow