main.js >
dt.getMonth()的结果是数字,需要转换成字符串才能用字符串方法——padStart,作用:如果不足两位,用0来填充
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入全局样式表
import './assets/css/global.css'
//导入字体图标
import './assets/fonts/iconfont.css'
import TreeTable from 'vue-table-with-tree-grid'
//全局定义一个格式化时间的过滤器
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
Vue.config.productionTip = false
//注册为全局可用组件
Vue.component('tree-table', TreeTable)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
list.vue >
<!-- -->
<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>
<!-- table表格区域 -->
<el-table :data="goodsList" border stripe>
<el-table-column label="创建时间" prop="add_time" width="160px">
<template slot-scope="scope">
{{ scope.row.add_time | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" width="120px">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
></el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import api from '@/utils/api/list'
export default {
name: '',
data() {
return {
//查询参数对象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10,
},
//商品列表
goodsList: [],
//总数据条数
total: 0,
}
},
created() {
this.getGoodsList()
},
methods: {
//根据分页获取对应的商品列表
async getGoodsList() {
const res = await api.getGoodsList(this.queryInfo)
if (res.meta.status !== 200) {
return this.$message.error('获取商品列表失败!')
}
this.$message.success('获取商品列表成功!')
this.goodsList = res.data.goods
this.total = res.data.total
},
},
}
</script>
<style scoped>
</style>