Dropdown 下拉菜單 修改為 select 框樣式，在框內顯示圖片，並且二次確認，選取消依舊顯示原來選項

 

 

 

 需求是修改的話需要二次確認，如果點擊取消，框內選項不變，select框不滿足要求，而且需要選中的圖片也填入框中，所以把下拉菜單修改了一下

<el-table-column label='數據可見性' >

                    <template slot-scope="scope">

                        <el-dropdown trigger="click" @command="handleCommand($event,scope.row)">

                            <el-button style="padding:8px 20px 12px;">

                                <div>

                                    <span v-if="scope.row.stateBool">

                                        <img  src="../../assets/kejian.png" alt="" style="position:relative;top:2px;width:18px;">

                                    </span>

                                    <span v-else>

                                        <img  src="../../assets/bukejian.png" alt="" style="position:relative;top:2px;">

                                    </span>

                                    <span>{{scope.row.stateBool?'可見':'不可見'}}</span>

                                    <i class="el-icon-arrow-down el-icon--right"></i>

                                </div>

                            </el-button>

                            <el-dropdown-menu slot="dropdown"  >

                                <el-dropdown-item :command="true" :disabled='scope.row.stateBool?true:false'><img src="../../assets/kejian.png" alt="" style="margin-right:16px;position:relative;top:2px;width:18px;">可見</el-dropdown-item>

                                <el-dropdown-item :command="false" :disabled='scope.row.stateBool?false:true'><img src="../../assets/bukejian.png" alt="" style="margin-right:16px;">不可見</el-dropdown-item>

                            </el-dropdown-menu>

                        </el-dropdown>

                    </template>

                </el-table-column>

 

 

 

 

// 下拉的點擊事件

        handleCommand(val,row) {

            this.$confirm('確定要更改這條數據的狀態嗎？ ?', '提示', {

                confirmButtonText: '確定',

                cancelButtonText: '取消',

                type: 'warning'

            }).then(() => {

                    row.stateBool = val

                let params = {

                    id:row.id,

                    state:row.stateBool?1:0

                }

                this.requestMethodPost("/web/common/updateSysDicById",params).then(res => {

                    if(res.data.code == 1000) {

                        // 刷新部件類型 表格數據

                        this.getAllData()

                    }

                }).catch(res => {

                    this.loading = false;

                });

            }).catch(() => {

                val = row.stateBool

            });

        },