el-switch开关

el-switch开关在表格中调用
效果图

注意：avue-switch在表格中用change事件可能会出现自动加载情况，用el-switch不会
1.加入el-switch标签并设置change事件

代码

<template slot="status" slot-scope="scope" >
<el-switch
on-value="true"
off-value="false"
v-model="scope.row.status"
@change="switchChange(scope.row)" >
</el-switch>
</template>
2.数据中的设置代码块

代码

{
label: "等级状态",
prop: "status",
slot: true,
rules: [
{
required: true,
message: "请输入等级状态",
trigger: "blur",
},
],
},
3.进入网页时自动加载区对每一行status进行处理（因为后台传值是string类型，在此需要转化成true和false，如果是boolean就不用进行此操作）

代码

onLoad(page, params = {}) {
this.loading = true;
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
for(var i=0;i<this.data.length;i++){
this.data[i].status=this.data[i].status=="true"?true:false
}
this.loading = false;
});
},

4.el-switch中change事件内容

代码

switchChange(row) {
update(row)
.then((data) => {
row.status =!row.status
console.log(!row.status)
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
});
},
全部代码

<template slot="status" slot-scope="scope">
<el-switch
on-value="true"
off-value="false"
v-model="scope.row.status"
@change="switchChange(scope.row)"
>
</el-switch>
</template>

</avue-crud>
</basic-container>
</template>

//--------el-switch 代码区
{
label: "等级状态",
prop: "status",
slot: true,
rules: [
{
required: true,
message: "请输入等级状态",
trigger: "blur",
},
],
},
//--------el-switch 代码区

{
label: "等级名称",
prop: "gradeName",
rules: [
{
required: true,
message: "请输入等级名称",
trigger: "blur",
},
],
},
{
label: "成长值",
prop: "growthValue",
rules: [
{
required: true,
message: "请输入成长值",
trigger: "blur",
},
],
},
{
label: "等级权益",
prop: "interests",
rules: [
{
required: true,
message: "请输入等级权益",
trigger: "blur",
},
],
},
{
label: "升级礼包",
prop: "gift",
rules: [
{
required: true,
message: "请输入升级礼包",
trigger: "blur",
},
],
},
],
},
data: [],
};
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: this.vaildData(this.permission.memberlevel_add, false),
viewBtn: this.vaildData(this.permission.memberlevel_view, false),
delBtn: this.vaildData(this.permission.memberlevel_delete, false),
editBtn: this.vaildData(this.permission.memberlevel_edit, false),
};
},
ids() {
let ids = [];
this.selectionList.forEach((ele) => {
ids.push(ele.id);
});
return ids.join(",");
},
},
methods: {
rowSave(row, loading, done) {
add(row).then(
() => {
loading();
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
},
(error) => {
done();
console.log(error);
}
);
},
rowUpdate(row, index, loading, done) {
update(row).then(
() => {
loading();
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
},
(error) => {
done();
console.log(error);
}
);
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
});
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDetail(this.form.id).then((res) => {
this.form = res.data.data;
});
}
done();
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params) {
this.query = params;
this.onLoad(this.page, params);
},
selectionChange(list) {
this.selectionList = list;
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
onLoad(page, params = {}) {
this.loading = true;
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;

//--------el-switch 代码区
for (var i = 0; i < this.data.length; i++) {
this.data[i].status = this.data[i].status == "true" ? true : false;
}
//--------el-switch 代码区

this.loading = false;
});
},
// 设置整列文字颜色霍字体大小
addClass({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
return "cell-color";
}
},

//--------el-switch 代码区
// 开关列点击事件
switchChange(row) {
update(row)
.then((data) => {
row.status =!row.status
console.log(!row.status)
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!",
});
});
},
//--------el-switch 代码区

},
};
</script>

猜你喜欢