简单的封装Element-ui Table表格组件
在vue项目中,如果使用了Element-ui框架,我们会经常使用到Table表格组件.
在vue中重复出现的,我们可以封装成为一个公共组件.那么今天我们就将它封装成可复用的组件吧!
本次封装组件中,用到知识点有父子组件传值,三元表达式.
1. 第一步
在vue公共文件夹中,创建一个公共组件vue文件.也是子组件.
<!-- 被封装的子组件 -->
<template>
<el-table :data="tableData2" stripe :border="obj.border?false:true">
<el-table-column v-if="obj.selection?obj.selection:false" type="selection" width="40"></el-table-column>
<el-table-column
v-if="obj.index?obj.index:false"
type="index"
:index="indexMethod"
label="序号"
width="50"
></el-table-column>
<el-table-column
:prop="item.prop"
v-for="item in obj.formList"
:key="item.label"
:label="item.label"
:width="item.width"
></el-table-column>
<el-table-column v-if="obj.operationList" label="操作">
<template slot-scope="scope">
<el-button
v-for="ope in obj.operationList"
:key="ope.label"
:size="ope.size?ope.size:'mini'"
:type="ope.type"
@click="btn(scope.row,ope.name)"
>{
{
ope.name}}</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
pageSize: 15, // 每页条数
};
},
props: {
tableData2: {
// 父组件传过来的数组
type: Array,
},
obj: {
// 父组件传过来的对象
type: Object,
},
},
methods: {
indexMethod(index) {
// 序号
return (this.obj.pageNum - 1) * this.pageSize + index + 1;
},
btn(item, msg) {
// 子组件通过点击事件向父组件传值,触发父组件事件
this.$emit("btn", item, msg);
},
},
};
</script>
2. 第二步
在需要使用的页面(父组件)中引入,被封装的组件(子组件)
<!-- 父组件 -->
<template>
<form-data :tableData2="tableData2" :obj="obj" @btn="deleteSystemUser" />
</template>
<script>
import formData from "../../../common/module/from.vue";
export default {
components: {
formData },
data() {
return {
obj: {
selection: true, // 是否有选中框
index: true, // 是否有序号
pageNum:1, // 页码
formList: [
{
label: "设备名称",
prop: "comments",
width: "200",
},
{
label: "时间",
prop: "date",
width: "200",
},
{
label: "tsp",
prop: "tsp",
width: "120",
},
{
label: "pm10",
prop: "pm10",
width: "120",
},
{
label: "pm2.5",
prop: "pm25",
width: "120",
},
{
label: "噪音",
prop: "noise",
width: "120",
},
{
label: "温度",
prop: "temperature",
width: "120",
},
{
label: "湿度",
prop: "humidity",
width: "120",
},
{
label: "风速",
prop: "windSpeed",
width: "120",
},
{
label: "气压",
prop: "airPressure",
width: "120",
},
],
operationList: [
// 操作按钮
{
name: "处理",
type: "success",
},
],
},
url: "",
projectId: "", // 项目id
tableData2: [], // 添加人员列表数据
pageSize: 15, // 摄像头列表每页条数
pageNum: 1, // 摄像头列表当前页
pageTotal: 2, // 摄像头列表总条数
};
},
created() {
this.projectId = sessionStorage.getItem("pid");
this.getCameraList();
},
updated() {
if (this.url != "") {
//如果在mounted中声明，直播地址还未取到，导致视频不显示。所以放在了这里
this.player1 = new EZUIPlayer("myPlayer");
}
},
methods: {
// 封装循环方法
isFor(res) {
if (res.data.data.rows) {
let rows = res.data.data.rows;
let temp = [];
rows.forEach((i, n) => {
temp.push({
number: (this.pageNum - 1) * this.pageSize + n + 1,
project: i.projectName,
state: i.projectState,
id: i.id,
});
});
this.tableData = temp;
this.pageTotal = res.data.data.total;
} else {
this.tableData = [];
this.pageTotal = 0;
}
},
// 封装翻页
pageClick() {
this.$axios
.post(
`/api/DustEmission/byprojectDustEmissionWarningCountInfo?projectid=${
this.projectId}&pageNum=${
this.pageNum}&pageSize=${
this.pageSize}`
)
.then((res) => {
this.isFor(res);
});
},
// 处理
deleteSystemUser(item, msg) {
let _this = this;
console.log(item);
if (msg == "处理") {
_this.$axios
.post(`/api/DustEmission/byDustEmissionIdUpdateState?ids=${
item.id}`)
.then((res) => {
console.log(res);
if (res.data.code == 0) {
_this.$message({
message: "审核通过",
type: "success",
});
_this.getCameraList();
} else {
_this.$message({
message: res.data.msg,
type: "warning",
});
}
});
}
},
// 一键通过
btn() {
if (this.selectionId == "") {
this.$message({
message: "请选择单个或多个选项",
type: "warning",
});
} else {
// this.$axios
// .post(
// `/api/pc/projectWorkersApi/shenhe?tag=0&ids=${this.selectionId}`
// )
// .then(res => {
// console.log(res);
// if (res.data.code == 0) {
// this.getPersonnelList();
// }
// });
}
},
// 序号
indexMethod(index) {
return (this.pageNum - 1) * this.pageSize + index + 1;
},
// 每页条数切换
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.pageSize = val;
this.obj.pageSize=val;
},
// 当前页
handleCurrentChange(val) {
this.pageNum = val;
this.obj.pageNum=val;
this.getCameraList();
},
// 获取扬尘报警信息列表
getCameraList() {
this.$axios
.post(
`/api/DustEmission/byprojectDustEmissionWarningCountInfo?projectid=${
this.projectId}&pageNum=${
this.pageNum}&pageSize=${
this.pageSize}`
)
.then((res) => {
this.tableData2 = res.data.data.rows;
this.pageTotal = res.data.data.total;
});
},
},
};
</script>