Hello, hello, I am very glad to read it. This article will organize the related usage of Vue+elementUI's table component, leave it to myself, and share it with beginners, and make progress together!
This article is the use case front-end code analysis of Vue+elementUI
Learning this chapter requires a little front-end foundation to read better
Downloaded a front-end case on git, the product list table is displayed as follows
Code analysis:
As shown in the figure, the table we show is the elements contained in el-table
1. It is especially important to note that the prop here must be consistent with the parameters passed from the background
For example, if you send goods_name from the background, you write good_name here, then the form is unrecognizable and the current small box will be empty.
2. Regarding the table, for example, a product Vo that you query in the backend has 10 attributes, but you only want to display 5 attributes on the front end, and other attributes are hidden and included in this row.
Here I print the relevant information of this line of goods in the edit button and use the alter to pop up to make it clearer
//编辑按钮的方法
edit(row){
//弹出一下这个对象的相关信息
alert(JSON.stringify(row));
}
JSON.stringify(row) is to convert the object into a json string and print it out, otherwise the object will be printed out
As mentioned above, attributes such as product id, creation time, product quantity, and update time are actually bound to the current row. These attributes can be displayed! Can be hidden! There has been!
3. For example, if we want to delete a certain product, we can follow the product id
How to get the product id? -> row.product id
Row represents the object of the current row. Through the object. Attribute, at the front end, you can get any attributes that exist in the front end of the product.
Code analysis:
Sorted out the basic meaning of this page loading method, more basic
Code details on this page
<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 Autumn is a harvest season, see you from a higher level!