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;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;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

            });

        },