1.关于vue中使用v-if='function( )'的问题
最近在做项目,想实现的功能是:< el-table >表格最后一列有一个按钮,这个按钮有两个可选项,根据条件选择展示哪一个按钮,按钮分别为“移除管理”和“添加管理”,如果当前行没有被管理则展示“添加管理”,否则展示“移除管理”。需求设计到后端请求,ajax请求。
一开始的思路是在后端写逻辑:判断当前行是否被管理,在前端发送ajax请求,代码如下:
// 按钮part
<el-button v-if="isDeptManage(scope.row)"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>移除管理</el-button>
<el-button v-else
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>加入管理</el-button>
// method:方法部分,isDeptManage(row.id)返回值为boolean
isDeptManage(row) {
isDeptManage(row.id).then(resp => {
return resp;
})
上面的代码在v-if里是获取不到boolean值的,获取到的值是undefined,网上说是什么异步请求,要使用callback,不太懂。.then内的代码不就是异步请求执行结束后才执行吗?
后来我是把逻辑直接改到前端了,涉及到return的函数,里面就不要有ajax请求了。
2.使用elementui的this.$confirm的坑
handleAdd(row) {
const stationId = row.id;
const deptId = this.deptId;
this.$confirm('是否确认将编号为"' + stationId + '"的探测站加入该部门的管理?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
// ==注意这里不能在使用vue的this==
return addStationDept({stationId: stationId, deptId: deptId});
}).then(() => {
this.getList();
this.msgSuccess("添加成功");
}).catch(function() {});
}
注意:在this.$confirm后面的 .then()不能再使用this,指向不一样了