【el-table】

前言

el-table 使用总结

---

一、需求描述

实现树形数据与懒加载、列字段排序、表头固定、详情路由跳转、后端分页

图示:

二、实现步骤

1.实现树形结构

添加属性：

渲染树形数据时，必须要指定 row-key
        row-key=“id”
通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 通过 tree-props 配置
        :tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"
row-class-name 属性来为 Table 中的某一行添加 class，本例用于设置父子内容背景色
        :row-class-name=“tableRowBgColor”

设置父子内容背景色：

	<style>
		// style 不加 lang="less" scoped
		.el-table .has-children-row {
   
		    background: #EBF8F8;
		}
		.el-table .is-children-row {
   
		    background: #FAFAFA;
		}
	</style>

	tableRowBgColor ({
    row}) {
   
	    if (row.hasChildren) {
   
	        return 'has-children-row'
	    }
	    if (row.isChildren) {
   
	        return 'is-children-row'
	    }
	    return ''
	}

单元格内容换行：
<br/>

	<el-table-column 
	    :label="$t('loc.assignedTo')"
	    width="120">
	    <template slot-scope="scope">
	        <span>{
  {$t('loc.recipients')}} ({
  {scope.row.sharedUsers.length}})</span>
	        <br/>
	        <span class="overflow-ellipsis w-full" :title="scope.row.sharedUserNames">{
  {scope.row.sharedUserNames}}</span>
	    </template>
	</el-table-column>

解决限制宽度使列内内容超限省略，引起懒加载按钮与内容换行：

	/deep/ .creator-col > .cell {
   
	    display: flex;
	    align-items: center;
	    .el-table__expand-icon {
   
	        flex: none;
	    }
	    .creator-name {
   
	        flex: auto;
	        min-width: 0;
	    }
	}
	
	.overflow-ellipsis {
   
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}

解决 el-table-column 限宽，列内容与表头错位问题：

	/deep/ .el-table table{
   
	  width: 0px;
	}

2.实现懒加载

添加属性：

设置 Table 的 lazy 属性为 true 与加载函数 load
        lazy
        :load=“getSharedRecordPlans”

懒加载列：

            <el-table-column 
                :label="$t('loc.assignedBy2')"
                sortable="custom"
                width="120"
                class-name="creator-col"
                :column-key="'CREATE_SHARE_USER'">
                <template slot-scope="scope">
                    <div class="overflow-ellipsis creator-name" :title="scope.row.createUsername">{
  {scope.row.createUsername}}</div>
                </template>
            </el-table-column>

加载子节点数据的函数：
resolve() 中传入子节点数据

methods: {
   
	...
	        getSharedRecordPlans (tree, treeNode, resolve) {
   
            let params = {
   
                shareId: tree.id,
                pageSize: 50,
            }
            this.$axios.post($api.urls().listSharedRecordPlans, params)
                .then(response => {
   
                    // 分享记录下周计划列表
                    let childrenItems = []
                    if (response.items.length > 0) {
   
                        // 向子记录中添加父记录内容
                        response.items.map((item) => {
   
                            childrenItems.push(Object.assign({
   }, item, {
   
                                'shareUser': tree.shareUser, 
                                'planCount': 1,
                                'sharedAtUtc': tree.sharedAtUtc,
                                'sharedUsers': tree.sharedUsers,
                                'sharedUserNames': tree.sharedUserNames,
                                'comment': tree.comment,
                                'isChildren': true
                                }))
                        })
                    }
                    resolve(childrenItems)
                }).catch(error => {
   })
        },
	...
}

3.实现列字段排序

添加属性：

列中设置 sortable 属性，通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。

如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件
        @sort-change=“sortChange”
本例采用后端排序

html 代码

:column-key="‘SHARE_USER’" 设置对应后端枚举值

    data () {
   
        return {
   
       		...
            sortField: '', //拍序列
            sortOrder: '', //排序规则
       		...
   		}
	}
	
	methods: {
   
		...
		sortChange (params) {
   
		    let order = params.order
		    if (!order) {
   
		        this.sortField = undefined
		        this.sortOrder = undefined
		    } else {
   
		        let columnKey = params.column.columnKey
		        this.sortField = columnKey ? columnKey : params.column.label
		        this.sortOrder = params.order === 'ascending' ? 'ASC' : 'DESC'
		    }
		    // 刷新数据
		    this.loadData()
		}
		...

       	loadData () {
   
			...
            // 选择了排序，则按照字段排序
            if (this.sortField && this.sortOrder) {
   
                params['orderKey'] = this.sortField
                params['orderType'] = this.sortOrder
            }
       		...
            this.loader(params).then(data => {
   
            	...
            }).catch(error => {
   
                ...
            })
  		}
   		...
	}

loadData

	TeacherSharedTable.vue
	
	<template>
		...
	        <div>
	            <shared-plan-table ref="sharededPlanTable" :loader="listSharedPlans"></shared-plan-table>
	        </div>
		...
	</templete>

	<script>
		import LessonApi from '@/api/lessons2'
		import SharedPlanTable from './components/SharedPlanTable'

		export default {
     
		    name: 'SharedPlanList',
		    components: {
     SharedPlanTable},
		    ...
	        methods: {
     
       			listSharedPlans (params) {
     
		            params['shareUserId'] = this.shareUserId
		            return LessonApi.listSharedPlans(params)
		            ...
      			}
			}
		}
	</script>

4.实现表头固定

添加属性：

只要在el-table元素中定义了height属性，即可实现固定表头
        :height=“tableHeight”

原始方案：

新问题：合适的 tableHeight

ofCourse el-table 中添加 ref=“table”

	SharePlanTable.vue 

	created