快捷導(dǎo)航

Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦)

更新時(shí)間：2024年03月11日 10:34:39 作者：滿上

這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時(shí),用v-model="visible"來控制時(shí),控件找不到這個(gè)值,才換成trigger="click",需要的朋友可以參考下

Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法

主要是技術(shù)太菜,沒找到原因,一點(diǎn)點(diǎn)才找到這個(gè)辦法解決

因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual" 時(shí),用v-model="visible"來控制時(shí),控件找不到這個(gè)值,才換成trigger="click"

先找到彈出關(guān)閉事件,再找元素的屬性

右鍵>審核元素,找到他的單擊事件,里面就有關(guān)閉的屬性

使用ref定位,js中根據(jù)ref修改是否顯示showPopper = false;

頁(yè)面大概代碼

<el-table-column>
    <template slot-scope="scope">
        <el-popover :ref="col.prop+'_'+scope.$index" trigger="click" >
            <span slot="reference" @click="ev_gytj_clk(scope.row,scope.$index)">{{ scope.row[col.prop] }}</span>
		</el-popover>
    </template>
</el-table-column>

js代碼

ev_gytj_clkitem(row,index,item){			
			row.gytj=item
			//Popper選中關(guān)閉		
			this.$refs['gytj_' + index][0].showPopper = false
		},

補(bǔ)充：

解決 el-table使用 el-popover 點(diǎn)擊沒反應(yīng) bug

項(xiàng)目場(chǎng)景：

原因分析：

在el-table使用el-popover時(shí)不能簡(jiǎn)單的按照官網(wǎng)給的實(shí)例操作實(shí)例只針對(duì)單個(gè)的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了所以我們?cè)谟|發(fā)按鈕的時(shí)候并不是單個(gè)的觸發(fā)某一個(gè)

解決方案：

方法一：

<template slot-scope="scope">
   <el-popover
         placement="top"
        :ref="`popover-${scope.$index}`">
        <p>確定刪除?</p>
        <div style="text-align: right; margin: 0">
                <el-button style="padding: 2px;" size="mini" type="text"                                 ???????                                    @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消
                </el-button>
                <el-button style="padding: 2px;" type="primary" size="mini"                                           @click="deltaskList(scope)">確定
                </el-button>
          </div>
          <el-button slot="reference" type="text" size="small">刪除</el-button>
   </el-popover>
</template>
//方法
deltaskList(e){
        e._self.$refs[`popover-${e.$index}`].doClose();
},

方法二：

<template slot-scope="scope">
   <el-popover
         placement="top"
        :ref="`popover-${scope.$index}`">
        <p>確定刪除?</p>
        <div style="text-align: right; margin: 0">
                <el-button style="padding: 2px;" size="mini" type="text"                 ???????        ???????        ???????                                    @click="deltaskList(scope.$index)">取消
                </el-button>
                <el-button style="padding: 2px;" type="primary" size="mini">確定
                </el-button>
          </div>
          <el-button slot="reference" type="text" size="small">刪除</el-button>
   </el-popover>
</template>
//方法
deltaskList(index){
       this.$refs[`popover-${index}`].doClose()
},

方法三：

<template slot-scope="scope">
   <el-popover
         placement="top"
         v-model="item.row.visible">
        <p>確定刪除?</p>
        <div style="text-align: right; margin: 0">
                <el-button style="padding: 2px;" size="mini" type="text"                 ???????        ???????        ???????                                    @click="deltaskList()">取消
                </el-button>
                <el-button style="padding: 2px;" type="primary" size="mini"         ???????                                                      @click="deltaskList()">確定
                </el-button>
          </div>
          <el-button slot="reference" type="text" size="small">刪除</el-button>
   </el-popover>
</template>
//方法
deltaskList(){
      this.$refs.closepopover.click();
},

到此這篇關(guān)于Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法的文章就介紹到這了,更多相關(guān)el-table使用el-popover選中關(guān)閉無效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: