關(guān)于ElementUI自定義Table支持render
更新時間：2022年10月21日 09:56:00 作者：蔣固金
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ElementUI自定義Table支持render
ElementUI中的Table組件可以通過render-header屬性通過render函數(shù)渲染表頭，對于數(shù)據(jù)單元格并沒有相關(guān)支持，雖然可以通過<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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue-prop父組件向子組件進行傳值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue 實現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對列表進行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)循環(huán)滾動列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
下面小編就為大家?guī)硪黄獀ue系列之動態(tài)路由詳解【原創(chuàng)】。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
我們在vuex中操作數(shù)據(jù)時遇見視圖不更新的情況,下面這篇文章主要給大家介紹了關(guān)于vuex更新視圖引發(fā)的一些思考,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue3項目啟動自動打開瀏覽器以及server配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03