vue-jsx 封装 element-ui 分页组件

vue使用render函数的jsx 语法二次封装 element-ui的分页组件(el-pagination)

使用jsx时要注意：

绑定单击事件： @xxxx 使用 on-xxx替代
绑定props: :xxxx 使用 xxx={this.xxx} 替代
Pagination.vue 
<script>
export default {
  name: 'myPagination',
  props: {
    total: {
      type: Number,
      default: 100
    },
    pageArray: {
      type: Array,
      default: () => [10, 20, 30, 50]
    },
    listQuery: {
      type: Object,
      default: () => {
        return {pageSize: 1, page: 1};
      }
    }
  },
  render(h) {
    return (
      <div class="pagination-wrapper">
        <el-pagination
          background
          on-current-change={this.handleCurrentChange}
          on-size-change={this.handleSizeChange}
          total={this.total}
          pageSizes={this.pageArray}
          currentPage={this.listQuery.page}
          pageSize={this.listQuery.pageSize}
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    );
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('currentChange', val);
    },
    handleSizeChange(val) {
      this.$emit('sizeChange', val);
    }
  }
};
</script>

组件中使用：

<my-pagination
   :total="pageTotal"
   :listQuery="listQuery"
   @currentChange="currentChange"
   @sizeChange="sizeChange"
/>
methods: {
  currentChange(val) {
    console.log(val);
  },
  sizeChange(val) {
   console.log(val);
  }
}

除特别注明外，本站所有文章均为原创，转载请注明原文链接：https://www.myblogbo.com/article/24.html


Top
×