關于ElementUI自定義Table支持render

更新時間：2022年10月21日 09:56:00 作者：蔣固金

這篇文章主要介紹了關于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

ElementUI自定義Table支持render

ElementUI中的Table組件可以通過render-header屬性通過render函數(shù)渲染表頭，對于數(shù)據(jù)單元格并沒有相關支持，雖然可以通過<template slot-scope="scope"></template >自定義列，但是在某些操作中直接用·render·形式進行渲染會更加有效，我一般喜歡通過數(shù)據(jù)的形式配置表格的內(nèi)容，所以對ElementUI中的Table組件進行二次封裝。

首先編寫用于表頭和數(shù)據(jù)單元格的部分：

TableHeaderCell.js

export default {
? name: 'TableHeadCell',
? functional: true,
? props: {
? ? render: Function,
? ? index: Number,
? ? column: Object,
? ? scopeColumn: Object,
? ? columns: Array,
? ? data: Array
? },
? render: (h, ctx) => {
? ? if (typeof ctx.props.render === 'function') {
? ? ? const params = {
? ? ? ? index: ctx.props.index,
? ? ? ? column: ctx.props.column,
? ? ? ? scopeColumn: ctx.props.scopeColumn,
? ? ? ? columns: ctx.props.columns,
? ? ? ? data: ctx.props.data,
? ? ? ? _self: ctx
? ? ? }
? ? ? return ctx.props.render.call(ctx.parent.$parent, h, params)
? ? } else {
? ? ? return h('span', ctx.props.column.label || ctx.props.column.prop || ctx.props.scopeColumn.property)
? ? }
? }
}

TableCell.js

export default {
? name: 'TableCell',
? functional: true,
? props: {
? ? row: Object,
? ? render: Function,
? ? index: Number,
? ? column: Object,
? ? scopeColumn: Object,
? ? columns: Array,
? ? data: Array
? },
? render: (h, ctx) => {
? ? if (typeof ctx.props.render === 'function') {
? ? ? const params = {
? ? ? ? row: ctx.props.row,
? ? ? ? index: ctx.props.index,
? ? ? ? column: ctx.props.column,
? ? ? ? scopeColumn: ctx.props.scopeColumn,
? ? ? ? columns: ctx.props.columns,
? ? ? ? data: ctx.props.data,
? ? ? ? _self: ctx
? ? ? }
? ? ? return ctx.props.render.call(ctx.parent.$parent, h, params)
? ? } else {
? ? ? if (typeof ctx.props.column.formatter === 'function') {
? ? ? ? return h('span',?
? ? ? ? ? ctx.props.column.formatter(
? ? ? ? ? ? ctx.props.row, ctx.props.scopeColumn,
? ? ? ? ? ? ctx.props.row[ctx.props.column.prop],
? ? ? ? ? ? ctx.props.index
? ? ? ? ? )
? ? ? ? )
? ? ? }
? ? ? return h('span', ctx.props.row[ctx.props.column.prop])
? ? }
? }
}

最后編寫表格主要部分：index.vue

<template>
? <el-table
? ? ref="targetTable"
? ? :data="data"
? ? v-bind="$attrs"
? ? v-on="$listeners"
? >
? ? <slot slot="empty" name="empty" />
? ? <slot slot="append" name="append" />
? ? <slot name="columns">
? ? ? <el-table-column
? ? ? ? v-for="column in computedColumns"
? ? ? ? :key="column.prop"
? ? ? ? v-bind="column"
? ? ? >
? ? ? ? <template slot="header" slot-scope="scope">
? ? ? ? ? <tabel-head-cell :column="column" :scope-column="scope.column"
? ? ? ? ? ? :index="scope.$index" :render="column.headerRender" :columns="columns" :data="data" />
? ? ? ? </template>
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <tabel-cell :row="scope.row" :column="column" :scope-column="scope.column"
? ? ? ? ? ? :index="scope.$index" :render="column.render" :columns="columns" :data="data" />
? ? ? ? </template>
? ? ? </el-table-column>
? ? </slot>
? </el-table>
</template>

<script>
import TabelCell from './TableCell'
import TabelHeadCell from './TableHeadCell'
const TATGET_TABLE_REF = 'targetTable'
export default {
? name: 'RenderTable',
? components: { TabelHeadCell, TabelCell },
? props: {
? ? columns: { type: Array, default: () => {} },
? ? data: { type: Array, default: () => {} }
? },
? computed: {
? ? computedColumns() {
? ? ? return this.columns && this.columns.filter(column => column.visible === undefined
? ? ? ? || column.visible === null || !!column.visible)
? ? }
? },
? methods: {
? ? // 表格原始方法
? ? clearSelection() {
? ? ? this.$refs[TATGET_TABLE_REF].clearSelection()
? ? },
? ? toggleRowSelection(row, selected) {
? ? ? this.$refs[TATGET_TABLE_REF].toggleRowSelection(row, selected)
? ? },
? ? toggleAllSelection() {
? ? ? this.$refs[TATGET_TABLE_REF].toggleAllSelection()
? ? },
? ? toggleRowExpansion(row, expanded) {
? ? ? this.$refs[TATGET_TABLE_REF].toggleRowExpansion(row, expanded)
? ? },
? ? setCurrentRow(row) {
? ? ? this.$refs[TATGET_TABLE_REF].setCurrentRow(row)
? ? },
? ? clearSort() {
? ? ? this.$refs[TATGET_TABLE_REF].clearSort()
? ? },
? ? clearFilter(columnKey) {
? ? ? this.$refs[TATGET_TABLE_REF].clearFilter(columnKey)
? ? },
? ? doLayout() {
? ? ? this.$refs[TATGET_TABLE_REF].doLayout()
? ? },
? ? sort(prop, order) {
? ? ? this.$refs[TATGET_TABLE_REF].sort(prop, order)
? ? }
? }
}
</script>

使用示例：

<template>
? ? <render-table
? ? ? :columns="columns"
? ? ? :data="list"
? ? />
</template>
<script>
import RenderTable from '_c/RenderTable'
export default {
? name: 'RenderTableTest',
? components: { RenderTable},
? data() {
? ? return {
? ? ? columns: [
? ? ? ? {
? ? ? ? ? prop: 'appId',
? ? ? ? ? label: '應用編號',
? ? ? ? ? fixed: true,
? ? ? ? ? align: 'center'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop: 'appName',
? ? ? ? ? label: '應用名稱',
? ? ? ? ? align: 'center'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop: 'enabled',
? ? ? ? ? label: '是否啟用',
? ? ? ? ? align: 'center',
? ? ? ? ? formatter(row, column, cellValue, index) {
? ? ? ? ? ? return cellValue ? '是' : '否'
? ? ? ? ? }
? ? ? ? },
? ? ? ? {
? ? ? ? ? fixed: 'right',
? ? ? ? ? label: '操作',
? ? ? ? ? align: 'center',
? ? ? ? ? render(h, { row }) {
? ? ? ? ? ? const _this = this
? ? ? ? ? ? return h('el-button-group', [
? ? ? ? ? ? ? h('el-button', {
? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? size: 'mini',
? ? ? ? ? ? ? ? ? type: 'primary'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? ? 'click'() {
? ? ? ? ? ? ? ? ? ? _this.handleEdit(row)
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }, '編輯')
? ? ? ? ? ? ])
? ? ? ? ? }
? ? ? ? }
? ? ? ],
? ? ? list: []
? ? }
? },
? methods: {
? ? handleEdit(row) {
? ? }
? }
}
</script>

ElementUI-Table表頭排序

ElementUI-Table表頭自帶排序功能，和排序事件，但是目前只是對當前界面的數(shù)據(jù)進行排序。

項目需求：點擊表頭排序的時候，對所有數(shù)據(jù)進行排序。
初步方案：在點擊排序按鈕的時，在排序事件sort-change 中，進行數(shù)據(jù)請求，此時會先重拍一次當前頁面的數(shù)據(jù)，再渲染接口返回數(shù)據(jù)。用戶體驗不是很好。
優(yōu)化方案：使用render-header自定義tableHeader，此時要使用render函數(shù)來創(chuàng)建表頭。

getheaderTime(h) {
? ? ? const This = this
? ? ? return h('div', {
? ? ? },
? ? ? ? ['告警時間',
? ? ? ? ? h('span', {
? ? ? ? ? ? class: 'iline-table-sort'
? ? ? ? ? },
? ? ? ? ? ? [
? ? ? ? ? ? ? h('i', {
? ? ? ? ? ? ? ? 'class': {
? ? ? ? ? ? ? ? ? 'el-icon-caret-bottom': This.orderByType === 'desc',
? ? ? ? ? ? ? ? ? 'el-icon-caret-top': This.orderByType === 'asc',
? ? ? ? ? ? ? ? ? 'active': This.orderBy === 'daqTime'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? attrs: {
? ? ? ? ? ? ? ? ? 'orderByType': 'desc',
? ? ? ? ? ? ? ? ? 'orderType': 'daqTime'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? ? click: This.clickHandler
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? style: {
? ? ? ? ? ? ? ? ? fontSize: '22px'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? ]
? ? ? ? ? )
? ? ? ? ])
? ? }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: