vue+element PC常用
Vue 常用 Element PC
2023-09-11 14:17:22 时间
<!-- Vue SFC --> <template> <div class="my-self-table"> <div class="container"> <div class="handle-box" style="margin-bottom: 20px;"> <!-- 按钮区 --> <el-input class="mr10 v-top" style="width:200px;" v-model="searchText" placeholder="请输入内容"></el-input> <el-button type="primary" @click="searchTextFn">搜索</el-button> </div> <div style="min-height:200px"> <!-- el-table --> <el-table :data="tableData" border style="width: 100%"> <el-table-column align="center" prop="date" label="日期" width="150"></el-table-column> <el-table-column :show-overflow-tooltip="true" align="center" prop="name" label="姓名" width="120" ></el-table-column> <el-table-column align="center" prop="address" label="地址"></el-table-column> <el-table-column align="center" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> <!-- page --> <div class="pagination" v-show="!loading"> <el-pagination background layout="prev, pager, next, sizes, total, jumper " @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.index" :page-size="page.size" :total="page.total" ></el-pagination> </div> </div> </div> </div> </template> <script> // import { Req_getToken } from "@/api/user"; export default { name: "SetQuota", components: {}, data() { return { searchText: "", loading: false, page: { index: 1, //当前页 size: 10, //每页条数 total: 0 //总条数 }, tableData: [ { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-02", name: "王小虎呜呜呜呜呜呜呜呜呜呜呜我无无", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-01", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333 } ] }; }, created() {}, mounted() {}, methods: { // 获取数据 async getData() { // let user = this.$store.state.user.userinfo; let datVal = {}; // console.log(datVal) // this.loading = true; // const result = await Req_getToken(datVal); // console.log(result) // this.loading = false; }, // 搜索 searchTextFn(){ // this.searchText }, handleClick(row) { console.log(row); }, handleSizeChange: function(val) { this.page.index = 1; this.page.size = val; this.getData(); }, handleCurrentChange: function(val) { this.page.index = val; this.getData(); } } }; </script> <style scoped> .my-self-table .el-table__header { width: 100% !important; } .my-self-table .el-table__body { width: 100% !important; } .handle-box { margin-bottom: 20px; } </style>
相关文章
- 关于个人开源项目(vue app)的一些总结
- Vue_(Router路由)-vue-router路由的基本用法
- vue入门-常用指令操作
- vue.js入门(五,组件更新,计算属性,watch监听)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: base64编码/解码(vue@3.2.37)
- Vue从零开始(一)
- nodejs的划时代意义,以及vue和nodejs的关系
- vue 常用哪些命令
- 如何用Vue + Mint UI实现上拉加载更多?
- Vue 3 Composition API - “ref”和“reactive”
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue、Vuejs从入门到精通 | 组件化开发
- 150:vue+openlayers 多边形拐点用不同形状表示(圆形、三角形、矩形、正方形、星形...)
- ECharts用法及常用配置项详解(Vue环境)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue常用修饰符
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 基于Java+SpringBoot+Vue前后端分离书店购书系统设计与实现(有视频教程)