<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style/css/ui.css">
<script src="./style/js/vue@2.js"></script>
<script src="./style/js/index.js"></script>
</head>
<body>
<div id="app">
<el-button type="primary">主要按钮</el-button>
<el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一个对话框</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
<el-table :data="tableData" style="width: 100%" height="500">
<el-table-column>
<template slot-scope="scope">
<div class="flex cell_render">
<div class="flex">
<span>¥{{ scope.row.stock }}/篇</span>
<b>{{scope.row.name}}</b>
</div>
<p>华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。</p>
<div class="flex">
<el-button>删除</el-button>
<el-button type="primary">通过</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
@current-change="handlePageChange"
>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
dialogVisible: false,
pageSize: 20,
currentPage: 1,
// 如果冲突需要改一下界定符
// $smarty->left_delimiter = '{%';
// $smarty->right_delimiter = '%}';
// 如果直接使用模板数据 如下
// allData: [
// {% foreach $items as $item %}
// { name: '{% $item.name %}', price: {% $item.price %} },
// {% /foreach %}
// ],
tableData: [{
stock: 12,
name: '小红'
},
{
stock: 12,
name: '小lb'
},
{
stock: 12,
name: 'hahhhahsh '
},
{
stock: 12
},
]
};
},
computed: {
// 当前页的数据
tableData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.tableData.slice(start, end);
},
// 数据总数
total() {
return this.tableData.length;
},
},
methods: {
// 分页切换事件
handlePageChange(page) {
this.currentPage = page;
},
},
});
</script>
</html>