基于vue2和element-ui实现的自定义分页表格组件_elementplus表格type="selection"翻页半选资源-CSDN文库

共8个文件

js：4个

woff：1个

css：1个

185 浏览量 2023-06-11 20:45:26 上传评论收藏 344KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

table-page.rar （8个子文件）

table-page

table-page.html 4KB

element-ui

element-ui-index.css 234KB

vue2.6.14.js 92KB

element-ui-index.js 649KB

jquery.js 262KB

fonts

element-icons.woff 28KB

element-icons.ttf 55KB

table-page.js 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义分页表格案例</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.9.2/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <table-page ref="table" multiple url="http://localhost:7593/data/dict/type/queryPage" @cell-db-click="cellDbClick" @row-click="rowClick"> <template #column> <el-table-column prop="createTime" label="日期" width="180"></el-table-column> <el-table-column prop="typeName" label="姓名" width="180"></el-table-column> <el-table-column prop="remark" label="地址"></el-table-column> </template> </table-page> <el-button @click="getSelectedData" type="primary">获取多选表格选择数据</el-button> <table-page ref="table2" multiple :data="data" @row-click="rowClick"> <template #column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </template> </table-page> <el-button @click="updateData" type="primary">更新表格数据</el-button> </div>    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script> <script src="https://unpkg.com/element-ui@2.9.2/lib/index.js"></script> <script src="table-page.js"></script> <script> // Vue3 创建对象的写法 const app = new Vue({ el: '#app', data() { return { data: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }] } }, methods: { updateData() { this.data = [{ date: '2023-05-02', name: '赵云', address: '北京市' },{ date: '2023-05-02', name: '赵云', address: '北京市' },{ date: '2023-05-02', name: '赵云', address: '北京市' }] }, cellDbClick(row, column, cell, event) { console.log('当前列是:', row, column, cell, event) }, rowClick(row) { console.log('当前行是:',row); }, getSelectedData() { console.log('获取多选表格选择数据: ',this.$refs['table'].getSelectedData()); } } }); </script> </body> </html>

评论收藏

内容反馈