首页 > 其他 > 详细

Dropdown 下拉菜单 修改为 select 框样式,在框内显示图片,并且二次确认,选取消依旧显示原来选项

时间:2020-12-30 11:15:23      阅读:44      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 技术分享图片

 

 需求是修改的话需要二次确认,如果点击取消,框内选项不变,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"  style="position:relative;top:2px;width:18px;">
                                    </span>
                                    <span v-else>
                                        <img  src="../../assets/bukejian.png"  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"  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"  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
            });
        },

Dropdown 下拉菜单 修改为 select 框样式,在框内显示图片,并且二次确认,选取消依旧显示原来选项

原文:https://www.cnblogs.com/823-/p/14209911.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!