耐心看我步骤,有什么留言交流
页面效果在最后
一、下载 mock.js
npm install mockjs
二、在根路径mock下创建一个ccc.js
// 路径 mock / ccc.js
const Mock = require('mockjs')
const data = Mock.mock({
'items|100': [{ // 生成10个数组
id: '@id',
pid: '@integer(1000, 1100)', // 生成一个1000-1100之间的整数
name: '@cname', // 生成一个英文名字,cname为中文名字
description: '@csentence(10, 20)', // 生成一句中文
price: '@integer(10,100) $',
edit: '',
value: '@float(1,2)', // 生成一个2-5之间的浮点数
display_time: '@datetime', // 生成一个日期
sales: '@integer(300, 400)'
}]
})
module.exports = [
{
url: '/vue-admin-template/ccc/list', // 路径记得要改
type: 'get',
response: config => {
const items = data.items
return {
code: 20000,
data: {
total: items.length,
items: items
}
}
}
}
]
三、在mock/index.js中加入
// 路径 mock / index.js
const ccc = require('./ccc')
const mocks = [
...ccc,
]
四、在src/api下创建一个ccc.js
// 路径 src / api / ccc.js
import request from '@/utils/request'
export function getList(params) {
return request({
url: '/vue-admin-template/ccc/list',
method: 'get',
params
})
}
五、在src/views中创建一个文件夹ccc/index.vue
// 路径 src / views / ccc / index.vue
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
stripe
fit
highlight-current-row
>
<el-table-column align="center" label="Num" width="95">
<template slot-scope="scope">
{{ scope.$index }}
</template>
</el-table-column>
<el-table-column label="ID" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.pid }}
</template>
</el-table-column>
<el-table-column label="Products" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>Name: {{ scope.row.name }}</p>
<p>Description: {{ scope.row.description }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="Sales" align="center">
<template slot-scope="scope">
{{ scope.row.sales }}
</template>
</el-table-column>
<el-table-column label="Rate" align="center">
<template slot-scope="scope">
<el-rate v-model="scope.row.value" disabled text-color="#ff9900"></el-rate>
</template>
</el-table-column>
<el-table-column label="Price" align="center" width="100">
<template slot-scope="scope">
<el-input v-show="scope.row.edit" size="small" v-model="scope.row.price "></el-input>
<span v-show="!scope.row.edit">{{ scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="Edit"> // 内联编辑
<template scope="scope">
<el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="el-icon-edit">Edit</el-button>
<el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="el-icon-check">完成</el-button>
<el-button type="danger" @click='delPro(scope.row.pid)' size="small" icon="el-icon-delete">Del</el-button>
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="Display_time" width="200">
<template slot-scope="scope">
<i class="el-icon-time" />
<span>{{ scope.row.display_time }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getList } from '@/api/ccc'
export default {
data() {
return {
list: null,
listLoading: true
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.listLoading = true
getList().then(response => {
this.list = response.data.items
this.listLoading = false
})
}
}
}
</script>