基于Element 封装table组件
封装自己的小组件是很有用的,不用重复的造轮子或者复制代码,网上的例子都是只说一半而且还是老是出错;今天我保姆式教学
一)在父组件中引用这个组件
<template>
<Table :options="options" ref="child"></Table>
</template>
在js中导入这个组件
import Table from "@/components/Table";
在父组件中开始最重要的的部分了就是设置你想要的列和格式
scope是在特殊列数,比如给某列显示图片啊 添加图标啊 等等 我这里没有显示图片 就没有写 (如果需要就可以 模仿的造用轮子 就可以了)
data(){
const options = {
isSearch: true,
columns: [
{ prop: "name", label: "姓名", scope: "isIcon" },
{ prop: "title", label: "xx" },
{ prop: "sourceName", label: "xx" },
{ prop: "className", label: "xx" },
{ prop: "valueName", label: "xx" },
{ prop: "editnum", label: "xxx" },
{ prop: "update_time", label: "xx", formatter: "time" },
{ prop: "status", label: "状态", scope: "status" },
{ prop: "actions", label: "操作", scope: "actions" },
],
operation: {
// 表格有操作列时设置
label: "操作", // 列名
width: "120", // 根据实际情况给宽度
data: [
// 功能数组
{
label: "查看", // 操作名称
type: "primary",
icon: "el-icon-edit",
action: "lookTopic",
handleRow: this.handleRow,
},
{
label: "通过", // 操作名称
type: "danger", //为element btn属性则是按钮
icon: "el-icon-check",
action: "carryTopic",
handleRow: this.handleRow,
},
],
},
tableData: [], // 表格数据
tableTotal: 0, //条数
loading: true, //数据加载中
drawer: true, //用户详情抽屉
urlaction: "datacheck", //请求的地址url
},
return {
options,
},
methods:{
//这里是子级调用父级的方法。
handleRow(id, lable) {
switch (lable) {
case "lookTopic":
this.showEditDilog(id);
break;
case "delete":
this.removeStuById(id);
break;
default:
return this.$message.error("获取参数出错!");
}
}
好了现在设置好了 父组件 现在该去配置子组件
<el-table
:data="options.tableData"
border
class="tableBox"
v-loading="options.loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-table-column type="index" label="#" width="55" align="center" />
<template v-for="column in options.columns">
<el-table-column
v-if="!column.scope"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:with="column.width"
:formatter="column.formatter === 'time' ? formatterTime : null"
align="center"
>
</el-table-column>
<el-table-column
v-else
:key="column.prop"
:prop="column.prop"
:label="column.label"
align="center"
>
<!--眼睛图片-->
<template slot-scope="scope">
<template v-if="column.scope === 'isIcon'">
<span style="width: 70px; display: inline-block">{{
scope.row.stu_name
}}</span>
<i
class="el-icon-view"
style="color: #409eff"
@click="drawerstuInfo(scope.row)"
></i>
</template>
<template v-if="column.scope === 'noIcon'">
<span style="width: 70px; display: inline-block">{{
scope.row.stu_name
}}</span>
</template>
<!--男女状态-->
<template v-else-if="column.scope === 'sexStatus'">
<el-tag v-if="scope.row.stu_sex == 1" type="warning" size="mini"
>男</el-tag
>
<el-tag v-else size="mini" effect="plain">女</el-tag>
</template>
<!-- 状态列 -->
<template v-else-if="column.scope === 'status'">
<el-tag :type="statusType(scope.row.status)" size="mini">{{
statusText(scope.row.status)
}}</el-tag>
</template>
<!--操作-->
<template v-else-if="column.scope === 'actions'">
<div class="btn">
<span v-for="item in options.operation.data" :key="item.label">
<div style="width: 40px; display: inline-block; margin: auto">
<el-tooltip effect="dark" placement="top" :enterable="false"
><span slot="content">{{ item.label }}</span>
<el-button
size="mini"
:icon="item.icon"
:type="item.type"
circle
@click.enter.prevent="
item.handleRow(scope.row.Id, item.action)
"
>
</el-button>
</el-tooltip>
</div>
</span>
</div>
</template>
</template>
</el-table-column>
</template>
</el-table>
//分页区域
<el-pagination
v-if="pageData"
style="margin-top: 5px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.page"
:page-sizes="[5, 10, 15, 30]"
:page-size="queryInfo.page_size"
layout="total, sizes, prev, pager, next, jumper"
:total="options.tableTotal"
>
</el-pagination>
下面啊是js代码
export default {
props: {
options: {
type: Object,
default: () => {},
},
},
data() {
return {
pageData: true,
drawerStatus: false,
tableData: [],
queryInfo: {
//搜索功能
query: "",
//当前页数
page: 1,
//当前每页显示多少条数据
page_size: 5,
//获取数据类型 0 表示为通过审核 1 通过审核
type: this.options.Datatype,
year: sessionStorage.getItem("year"),
},
//数据总和
tableTotal: 0,
//抽屉数据
drawerData: [],
};
},
computed: {
statusType() {
return function (val) {
if (val === 12) {
//主要按钮
return 'primary'
} else if (val === 11) {
//成功按钮
return 'success'
}else if(val === 0){
//信息按钮
return "info"
}else if(val === 13){
//警告按钮
return "warning"
}else{
//危险按钮
return "danger"
}
};
},
statusText() {
return function (val) {
switch(val){
case 0:
return '暂无数据'
case 11:
return '通过'
case 12:
return '未通过'
case 13:
return '未审阅'
}
};
},
},
created() {
this.gettableData();
},
methods: {
//获取数据
async gettableData() {
// this.statuslist =JSON.parse(sessionStorage.getItem("status"));
// console.log(this.statuslist)
let that = this;
await that.$http
.get(this.options.urlaction, { params: that.queryInfo })
.then((res) => {
this.options.loading = false;
if (res.code !== 200) {
that.options.tableData = [];
that.pageData = false;
return;
}
that.options.tableData = res.data;
that.options.tableTotal = res.total;
});
},
//时间格式转化
formatterTime(row, column, cellValue) {
cellValue = cellValue.substring(0, 10);
return cellValue;
},
//监听pagesize 改变的事件
handleSizeChange(newSize) {
this.queryInfo.page_size = newSize;
this.queryInfo.page = 1;
this.gettableData();
},
//监听页码值改变的事件
handleCurrentChange(newPage) {
this.queryInfo.page = newPage;
this.gettableData();
},
},
drawerstuInfo(id) {
this.drawerData = id;
this.drawerStatus = true;
},
};
好了,到此结束 就是这么简单
那就来看看效果图吧
版权原因 不能公布一些东西