根据element |
您所在的位置：网站首页 › 奥运会3v3女子篮球冠军是谁 › 根据element |
根据element
|
平时在开发中，会经常使用到element-ui等类似的UI组件库，而在业务开发中，经常会调用一些组件，如table组件，于是就想，可不可以将其封装起来，方便自己调用呢，于是说干就干。 封装的这个组件要有以下功能： 首先想的是封装的这个组件要完全覆盖element-ui组件table原生的功能。不仅支持prop方式去渲染表格列，也支持render方式渲染。支持分页于是，为了实现自己的这个想法，就利用vue-cli 3.0脚手架，搭建了一个项目工程，取名为vue-table 然后在components目录下新建一个BaseTable的目录，用来存放我们的这个公共table组件。 BaseTable目录下有两个文件index.vue, tableConfig.js index.vue：处理table组件的相关逻辑。 tableConfig.js: 放置table组件一些默认的配置项。 这里用到vue2.4所提到的$attrs, $listeners两个属性，来简化代码。 index.vue的代码如下： import { defaultTableAttrs, defaultColumn, defaultPagination } from './tableConfig' export default { name: 'BaseTable', components: { expandDom: { functional: true, props: { row: Object, col: Object, render: Function, colIndex: [Number, String] }, render(h, ctx) { const randomIndex = Math.random().toString(35).replace('.', '') const params = { row: { ...ctx.props.row }, colIndex: ctx.props.colIndex || randomIndex } if (ctx.props.col) { params.col = ctx.props.col } return ctx.props.render && ctx.props.render(h, params) } } }, props: { data: { type: Array, default() { return [] } }, columns: { type: Array, default() { return [] } }, // eslint-disable-next-line vue/require-default-prop pagination: { type: [Object, Boolean] } }, data() { return { tableAttrs: {}, columnAttrs: [], paginationAttrs: {} } }, watch: { pagination: { handler(val) { this.getPagination() }, deep: true } }, created() { this.$nextTick(() => { this.init() }) }, methods: { init() { // 获取element table上的属性 const tableAttrs = { } Object.keys(defaultTableAttrs).forEach(key => { if (this.$attrs[key] !== undefined) { tableAttrs[key] = this.$attrs[key] } }) this.tableAttrs = Object.assign({}, defaultTableAttrs, tableAttrs) // 获取element table col上的属性 this.columnAttrs = this.columns.map(column => { const obj = Object.assign({}, defaultColumn, column) return obj }) }, getPagination() { // 获取element 分页属性 const pagination = this.pagination let paginationAttrs = {} if (pagination) { if (typeof pagination === 'object') { paginationAttrs = { ...defaultPagination, ...pagination, isPagination: true } } else { paginationAttrs = { ...defaultPagination, isPagination: true } } } Object.keys(paginationAttrs).forEach(key => { if (this.$attrs[key] !== undefined && key !== 'pagination') { paginationAttrs[key] = this.$attrs[key] } }) this.paginationAttrs = paginationAttrs }, handleSizeChange(pageSize) { this.$emit('size-change', pageSize) }, handleCurrentChange(page) { this.$emit('current-change', page) } } } .pagination-container{ margin-top: 10px; text-align: right; }tableConfig.js代码如下： export const defaultTableAttrs = { data: null, height: null, "max-height": null, stripe: false, border: false, size: null, fit: true, "show-header": true, "highlight-current-row": false, "current-row-key": null, "row-class-name": null, "row-style": null, "cell-class-name": null, "cell-style": null, "header-row-class-name": null, "header-row-style": null, "header-cell-class-name": null, "header-cell-style": null, "row-key": null, "empty-text": "暂无数据", "default-expand-all": false, "expand-row-keys": null, "default-sort": null, "tooltip-effect": null, "show-summary": false, "sum-text": "合计", "summary-method": null, "span-method": null, "select-on-indeterminate": true, indent: 16, lazy: null, load: null, "tree-props": { hasChildren: "hasChildren", children: "children" } }; export const defaultColumn = { type: null, index: null, "column-key": null, label: null, prop: null, width: null, "min-width": null, fixed: null, "render-header": null, sortable: false, "sort-method": null, "sort-by": null, "sort-orders": ["ascending", "descending", null], resizable: true, formatter: null, "show-overflow-tooltip": false, align: "left", "header-align": null, "class-name": null, "label-class-name": null, selectable: null, "reserve-selection": false, filters: null, "filter-placement": null, "filter-multiple": true, "filter-method": null, "filtered-value": null }; export const defaultPagination = { pageSize: 10, currentPage: 1, total: 0, layout: "total, sizes, prev, pager, next, jumper" };这样，就大功告成啦，于是去试试吧 // @ is an alias to /src export default { name: "home", components: { BaseTable: () => import("@/components/BaseTable") }, data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ], columns: [ { prop: "name", label: "姓名" }, { prop: "date", label: "日期" }, { prop: "address", label: "地址", sortable: true, render(h, params) { console.log(params); return h("el-tag", {}, "哈哈"); } } ] }; } };最终页面显现效果如下： |
非常nice,喜欢的朋友记得收藏呀！【本文地址】
今日新闻 |
推荐新闻 |