<el-tooltip :content="scope.row.spFlag == '0' ? '加入白名单' : '移除白名单'" placement="top"
v-if="scope.row.userId !== 1">
<el-button v-if="scope.row.userId !== 1 && isActive && activeIndex == scope.$index"
@click="handWhiteList(scope.$index, scope.row)" class="el-icon-devops-button">
<el-button @click="handWhiteList(scope.$index, scope.row)" class="el-icon-devops-button">
const isActive = ref(false);
//看自己项目 我这个第一个admin账号这些按钮
const activeIndex = ref(1);
/* 加入白名单 */
function handWhiteList(index, row) {
const nickName = row.nickName
console.log('row.spFlag', index, row.spFlag);
let form = {}
if (row.spFlag == '0') {
form = {
spFlag: "1",
userId: row.userId,
}
} else {
form = {
spFlag: "0",
userId: row.userId,
}
}
console.log('form', form);
uploadSpFlag(form).then(response => {
// activeIndex.value = index
// proxy.$modal.msgSuccess("已加入白名单");
// console.log('activeIndex', activeIndex.value);
console.log('', form.spFlag);
if (form.spFlag == '1') {
proxy.$modal
.confirm('是否确认将用户"' + nickName + '"加入白名单')
.then(function () {
proxy.$modal.msgSuccess("已加入白名单");
activeIndex.value = index
isActive.value = true
getList();
})
.catch(() => {
});
} else {
proxy.$modal
.confirm('是否确认将用户"' + nickName + '"移除白名单')
.then(function () {
proxy.$modal.msgSuccess("移除成功");
isActive.value = false
getList();
})
.catch(() => {
});
}
})
}
<el-button @click="handWhiteList(scope.row)" class='button'>
<i class="el-icon-whiteList" />
//动态设置class当点击按钮调取接口之后修改内容之后把之前的默认图标换成别的
、、<i :class="isActive == true ? 'el-icon-true' : ' el-icon-whiteLis'" />
// 自定义icon，这个el-icon-whiteList是我自己命名的
</el-button>
::v-deep .el-icon-devops {
background: url('../../../assets/add.png') center no-repeat; // 注意此处的url，在这里引入自己的图片
font-size: 12px;
background-size: cover;
}
::v-deep .el-icon-whiteList:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
//把按钮的边框去掉 看自己项目的样式 是否需要
.button{
border-color: transparent;
color: var(--el-color-primary);
background: 0 0;
padding-left: 0;
padding-right: 0;
}
::v-deep .el-icon-true {
background: url('../../../assets/true.png') center no-repeat; // 注意此处的url，在这里引入自己的图片
font-size: 12px;
background-size: cover;
}
.el-icon-true:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
