<template>
<div>
<el-table :data="tableData" border stripe>
<el-table-column label="名称" prop="title"></el-table-column>
<el-table-column label="分类" prop="category"></el-table-column>
<el-table-column label="品牌" prop="brand"></el-table-column>
<el-table-column label="可出售" prop="saleable" >
<template slot-scope="scope">
<!-- {{scope.row}}-->
<el-switch v-model="scope.row.saleable" active-valuee="1" inactive-value="0"></el-switch>
</template>
</el-table-column>
<el-table-column label="上次更新时间" prop="lastUpdateTime"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-tooltip effect="dark" content="查看品牌详细商品信息" placement="top">
<el-button type="primary" size="mini" icon="el-icon-view"></el-button>
</el-tooltip>
<el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
<el-tooltip effect="dark" content="修改商品信息" placement="top">
<el-button type="warning" size="mini" icon="el-icon-setting"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
name: "ShopInfo",
data() {
return {
//获取用户列表的数据
queryInfo: {
page: 1,
size: 5
},
tableData: [{
lastUpdateTime: '2016-05-02',
title: '小米9',
saleable: '1',
category: '手机',
brand: '小米'
}],
}
},
mounted() {
},
methods: {}
}
</script>
<style scoped>
</style>
vue管理系统展示数据模板
最新推荐文章于 2024-06-10 08:24:01 发布