You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.6 KiB
109 lines
3.6 KiB
<!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>
|