hello你好很高兴能来阅读，本篇整理一下Vue+elementUI的表格组件相关用法，留给自己，也分享给初学者，一起进步！
本篇是Vue+elementUI的使用案例前端代码解析
学习本章要有一点点前端基础，才能更好的阅读
在git上下载了一个前端案例，商品列表表格显示如下
代码分析：
如图我们显示出来的表格就是el-table中包含的元素
1、特别要注意的是这里的prop一定要和后台传来的参数是一致的
比如你后台传来goods_name 你这里写成good_name 那么该表格是无法识别的 当前小框就会显示为空
2、关于表格比如你后台查询出来的一个商品Vo有10个属性，但是你前端只想显示5个属性，其它属性就被隐藏的包含在这一行当中了
这边我在编辑按钮打印一下这一行商品的相关信息 用alter弹出来让看的更加清楚
//编辑按钮的方法
edit(row){
//弹出一下这个对象的相关信息
alert(JSON.stringify(row));
}
JSON.stringify(row)就是将对象转换成json串打印出来 ，不然打印出来的是object
如上向商品id，创建时间，商品数量，更新时间等属性其实都是绑定在当前行的。这些属性可显示！可隐藏！一直存在！
3、比如我们要删除某一个商品可以根据商品id
如何获取商品id ?-> row.商品id
row就代表当前行的对象，通过对象.属性，在前端，你可以获取任何该商品前端存在属性。
代码分析：
整理了一下本页面加载方法的基本含义，比较基础
本页代码详情
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
clearable
v-model="queryInfo.query"
@clear="getGoodsList"
>
<el-button
slot="append"
icon="el-icon-search"
@click="handleCurrentChange(1)"
></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="goAddPage">添加商品</el-button>
</el-col>
</el-row>
<el-table :data="goodslist" stripe border style="width: 100%">
<el-table-column type="index"> </el-table-column>
<el-table-column prop="goods_name" label="商品名称"></el-table-column>
<el-table-column prop="goods_price" label="商品价格（元）" width="95px"></el-table-column>
<el-table-column prop="goods_weight" label="商品重量" width="70px"></el-table-column>
<el-table-column prop="add_time" label="创建时间" width="170px">
<template v-slot="scope">
{
{
scope.row.add_time | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" width="130px">
<template v-slot="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
<el-button size="mini" type="warning" icon="el-icon-delete" @click="removeById(scope.row.goods_id)"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[10, 20, 50]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
>
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10
},
goodslist: [],
total: 0
};
},
created() {
this.getGoodsList();
},
methods: {
async getGoodsList() {
const {
data } = await this.$http.get("goods", {
params: this.queryInfo
});
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg);
}
this.goodslist = data.data.goods;
this.total = data.data.total;
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize;
this.getGoodsList();
},
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage;
this.getGoodsList();
},
// eslint-disable-next-line no-unused-vars
edit(row){
alert(JSON.stringify(row));
},
removeById(id) {
this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(async () => {
const {
data } = await this.$http.delete(`goods/${
id}`);
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg);
}
this.getGoodsList();
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
goAddPage() {
this.$router.push("goods/add");
}
}
};
</script>
<style lang="less" scoped></style>
The best investment is to invest in yourself.
2020.09.12 秋天是个收获的季节，我们更高处见！