Vue2+elementUI：使用JSX和template两种方式对el |
您所在的位置：网站首页 › elememtui语法 › Vue2+elementUI：使用JSX和template两种方式对el |
Vue2+elementUI：使用JSX和template两种方式对el
|
应用场景：在编写后台管理系统时，常常会用到表格和翻页器，每次都需要重复的写很麻烦，并且普通表格只需要渲染对应的prop就可以了，完全可以用一个v-for判断去解决，因此一个自带翻页器的table组件就应运而生了 实现功能： 在渲染表格时，只需要传递列表配置即可无脑渲染，无需疯狂cv然后改一些鸡毛蒜皮的小东西根据字段判断是否自定义插槽，使用具名插槽去单独编译分页器和翻页的方法都绑定到同一个方法，父组件接收一个渲染列表的方法即可有JSX和template两种写法，各取所需（vue2版本） 一、tamplate写法 { parseTime(scope.row.createTime) }} --> import { scrollTo } from '@/utils/scroll-to' export default { name: 'HcTable', props: { // 表单数据 tableData: Array, // 数据列表配置 columns: Array, // 行样式 tableRowClassName: Function, // 加载状态 loading: Boolean, // 单元格的 style 的回调方法 cellStyle: Function, // 是否展示翻页组件 showPagination: { type: Boolean, default: true }, // 总数 total: Number, // pagination的page page: Number, // pagination的limit limit: Number, pageSizes: { type: Array, default() { return [10, 20, 30, 50] } }, // 移动端页码按钮的数量端默认值5 pagerCount: { type: Number, default: document.body.clientWidth this.total) { this.currentPage = 1 } this.$emit('pagination', { page: this.currentPage, limit: val }) }, handleCurrentChange(val) { this.$emit('pagination', { page: val, limit: this.pageSize }) } } } .pagination-container { background: #fff; padding: 32px 16px; } .pagination-container.hidden { display: none; } 二、JSX写法 export default { name: 'HcTable', props: { // 表单数据 tableData: Array, // 数据列表配置 columns: Array, // 行样式 tableRowClassName: Function, // 加载状态 loading: Boolean, // 单元格的 style 的回调方法 cellStyle: Function, // 是否展示翻页组件 showPagination: { type: Boolean, default: true }, // 总数 total: Number, // pagination的page page: Number, // pagination的limit limit: Number, pageSizes: { type: Array, default() { return [10, 20, 30, 50] } }, // 移动端页码按钮的数量端默认值5 pagerCount: { type: Number, default: document.body.clientWidth this.total) { this.currentPage = 1 } this.$emit('pagination', { page: this.currentPage, limit: val }) }, handleCurrentChange(val) { this.$emit('pagination', { page: val, limit: this.pageSize }) }, renderTable() { const { tableRowClassName, loading, tableData, cellStyle, sortChange } = this return {this.columns.map((item, index) => this.renderTableColumn(item, index))} }, renderTableColumn(item, index) { if (item.visible === false) return if (item.type === 'slot') { /* solt 自定义列 自定义列的使用方法: 在使用插槽时#后跟slotType */ return { return this.$scopedSlots[item.slotType]({ row: row }) }} > } else { // 普通表格 return } }, renderPagination() { const { showPagination, pageSizes, pagerCount, total, layout, currentPage, pageSize, handleSizeChange, handleCurrentChange, background } = this const listeners = { // 关键代码 - 1 'update:current-page': val => { this.currentPage = val }, 'update:limit': val => { this.pageSize = val } } if (showPagination && total > 0) { return } } }, render(createElement, context) { return {this.renderTable()}{this.renderPagination()} } } .pagination-container { background: #fff; padding: 32px 16px; } .pagination-container.hidden { display: none; } 三、使用方法示例：
|
【本文地址】