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>
<basic-container>
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
:page="page"
:permission="permissionList"
:before-open="beforeOpen"
v-model="form"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@on-load="onLoad"
:cell-class-name="addClass" >
<template slot="menuLeft">
<el-button
type="danger"
size="small"
icon="el-icon-delete"
plain
v-if="permission.memberlevel_delete"
@click="handleDelete"
>删 除
</el-button>
</template>
<!-- el-switch 代码区 -->
<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>
<!-- el-switch 代码区 -->
</avue-crud>
</basic-container>
</template>
<script>
import {
getList,
getDetail,
add,
update,
remove,
} from "@/api/a/member/m_grade";
import { mapGetters } from "vuex";
export default {
data() {
return {
form: {},
query: {},
loading: true,
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
tip: false,
border: true,
index: true,
viewBtn: true,
selection: true,
column: [
{
label: "等级",
prop: "grade",
rules: [
{
required: true,
message: "请输入等级",
trigger: "blur",
},
],
},
//--------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>
<style>
/* addClass中添加的样式 */
.cell-color {
color: #ffaa00 !important;
cursor: pointer;
}
</style>