Vue element 合并相同行
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- <el-button type="primary" size="mini" @click="handleAdd">新增</el-button> -->
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
:span-method="objectSpanMethod"
border
>
<el-table-column prop="modularName" label="模块名称" align="center" />
<el-table-column prop="businessName" label="提醒业务" align="center" />
<el-table-column prop="pushType" label="推送类型" align="center">
<template slot-scope="scope">
<div v-if="scope.row.pushType==0">站内推送</div>
<div v-if="scope.row.pushType==1">站外推送</div>
</template>
</el-table-column>
<el-table-column prop="userType" label="用户" align="center">
<template slot-scope="scope">
<div v-if="scope.row.userType==0">学生</div>
<div v-if="scope.row.userType==1">老师</div>
<div v-if="scope.row.userType==2">一级合伙人</div>
<div v-if="scope.row.userType==3">创客</div>
<div v-if="scope.row.userType==4">师资合伙人</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<div v-if="scope.row.status==0">开启</div>
<div v-if="scope.row.status==1">关闭</div>
</template>
</el-table-column>
<el-table-column prop="action" label="操作" align="center">
<template slot-scope="scope">
<el-button
v-if="scope.row.onlyRead == 0"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>-->
</template>
</el-table-column>
</el-table>
<!-- 添加参数配置对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="620px"
append-to-body
center
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="160px">
<el-row>
<el-form-item label="模块名称:">
<span>{{form.modularName}}</span>
</el-form-item>
<el-form-item label="提醒业务:">
<span>{{form.businessName}}</span>
</el-form-item>
<el-form-item label="推送类型">
<el-radio v-model="form.pushType" label="0">站内推送</el-radio>
<el-radio v-model="form.pushType" label="1">站外推送</el-radio>
</el-form-item>
<el-form-item label="内容">
<el-input type="textarea" v-model="form.text"></el-input>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" center>确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getlist,
getmoudle,
getTemplateInfo,
updateTemplate,
} from "@/api/setting/index";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { regionData, CodeToText } from "element-china-area-data";
var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
export default {
name: "User",
components: { Treeselect },
data() {
return {
spanArr: [],
position: 0,
lable:0,
regions: regionData,
incomeProportion: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 状态数据字典
statusOptions: [],
// 性别状态字典
sexOptions: [],
// 表单参数
form: {
pushType: "1",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 1000,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
};
},
watch: {},
created() {
this.getList();
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
getmoudle(this.queryParams).then((response) => {
// console.log(response)
this.loading = false;
});
getlist().then((response) => {
this.userList = response.rows;
this.rowspan();
});
},
//获得数据相同的行数
rowspan() {
//每次调用清空数据
this.spanArr = [];
this.position = 0;
this.userList.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
if (
this.userList[index].modularCode ===
this.userList[index - 1].modularCode
) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//表格合并行
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
// 取消按钮
cancel() {
this.open = false;
// this.reset();
},
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
sysRoleId: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.page = 1;
this.getList();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
// handleAdd() {
// this.reset();
// this.open = true;
// this.title = "新增业务提醒";
// getmoudle(this.queryParams).then((response) => {
// this.roleList = response.rows;
// console.log(this.roleList);
// // this.total = response.total;
// this.loading = false;
// });
// },
/** 编辑按钮操作 */
handleUpdate(row) {
this.title = "编辑业务提醒";
const userId = row.id || this.id;
getTemplateInfo(userId).then((response) => {
this.form = response.data;
// console.log(this.form);
this.open = true;
// this.title = "添加用户";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
updateTemplate(this.form).then((response) => {
if (response.code === 200) {
if (this.lable == "0") {
this.form.pushType = 0;
}
if (this.lable == "1") {
this.form.pushType = 1;
}
this.msgSuccess("修改成功");
this.open = false;
this.getList();
} else {
this.msgError(response.msg);
}
});
}
}
});
},
/** 删除按钮操作 */
// handleDelete(row) {
// const userIds = row.id;
// this.$confirm(
// '是否确认删除用户编号为"' + userIds + '"的数据项?',
// "警告",
// {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// center: true,
// }
// )
// .then(function () {
// return delTemplate(userIds);
// console.log(123);
// })
// .then(() => {
// this.getList();
// this.msgSuccess("删除成功");
// })
// .catch(function () {});
// },
},
};
</script>
<style lang="scss">
.dialog-footer {
display: flex;
justify-content: space-evenly;
width: 25%;
margin: 0 auto;
}
</style>
