vue中el-table的简单使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中el-table的简单使用相关的知识,希望对你有一定的参考价值。
参考技术A 作用域插槽slot-scope="scope"循环判断比如传过来的数组是numbers要过滤掉不能被整除的
排序: https://www.cnblogs.com/lianxisheng/p/10023346.html
http://www.teamsfy.com/html/r_0199dfe2727246c2bfcd96a8af1e49ab.html
Vue-ele中使用el-table实现商品列表
参考技术A <template><div>
<h1>goods</h1>
<el-button type="danger" plain @click="del">批量删除</el-button>
<!-- 提示框的颜色 有light和dark -->
<el-table
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:row-key="row=>row.goods_id"
>
<el-table-column
type="selection" width="55"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
prop="add_time"
label="添加时间"
width="120"
></el-table-column>
<el-table-column prop="goods_id" label="商品id" width="120">
<template slot-scope="scope">
<el-tag> scope.row.goods_id </el-tag>
</template>
</el-table-column>
<el-table-column
prop="goods_name"
label="商品名称"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="goods_number" label="商品数量" width="120">
</el-table-column>
<el-table-column prop="goods_price" label="商品价格" width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
import menusGet, delDelete from "@/http/request.js";
export default
data()
return
pagenum: 1,
pagesize: 10,
query: "",
tableData: [],
multipleSelection: [],
;
,
methods:
handleSelectionChange(val)
this.multipleSelection = val;
,
/* 批量删除 */
del()
console.log(delDelete);
.then(()=>
this.multipleSelection.forEach((r,i) =>
console.log(r.goods_id)
delDelete(`goods/$r.goods_id`,
id:r.goods_id
).then((res) =>
let meta = res.data;
if(meta.status==200&&(i+1)==this.multipleSelection.length)
this.$message.success(meta.msg)
/* 删除数据后,重新渲染页面 */
this.showTable();
);
);
)
/* 点击取消走catch */
.catch(()=>
this.$message.warning('谢谢你的手下留情')
)
,
showTable()
menusGet("goods",
pagenum: this.pagenum,
pagesize: this.pagesize,
query: this.query,
)
.then((res) =>
console.log(res);
let meta, data = res.data;
if (meta.status == 200)
this.tableData = data.goods;
)
.catch((err) =>
console.log(err);
);
,
,
created()
this.showTable();
,
;
以上是关于vue中el-table的简单使用的主要内容,如果未能解决你的问题,请参考以下文章