Backup and share
Backup and share

Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

前篇已搭建了starter项目，现在想在页面中添加table。数据需要从本地文件获取，还需要对table做各种操作。比如进行排序（单列默认排序、多列默认排序）、筛选（根据某列取值筛选行数据）、默认筛选+页面筛选（读数据时默认筛选+页面输入框筛选组合）、数据格式调整、样式调整、简短列详细列切换功能（列太多时，让表格默认展示个别列）。数据展示都ok后，添加数据下载功能。

目录

一、table表格及排序

二、导入数据、本地json文件调用

三、筛选（根据某列取值筛选行数据）

四、读取数据时默认筛选+页面输入框筛选组合

五、表格数据格式调整

5.1 表头样式、表内容格式

5.2 不同列数据格式不同

5.3 根据A列的值设置B列的数据格式

六、表格样式、数据样式调整

6.1 改变表格行的背景色

6.2 根据单元格取值设置字体颜色

七、简短列详细列切换功能

八、数据下载功能

 

一、table表格及排序

Table 表格 官网这里很详细。字段排序和一个字段的默认排序方法这里可以找到，原始数据是在data()中返回的。

Vue+elementUI从头开始构建前端页面(中篇-Table作妖)_第1张图片

对于多字段默认排序，首先在生成数据时将需要排序的字段拼接起来构成一个索引字段，然后默认根据索引字段排序。暂未找到更好的方法。

:default-sort="{prop: 'd_index', order: 'descending'}"

排序列d_index需要在table中显示才能生效，默认隐藏不生效

 

二、导入数据、本地json文件调用

如果在data()中预制一些数据无法满足需求，可考虑从本地文件读取原始数据。

在vuejs页面中通过axios获取本地static文件夹下的json文件 这个文章亲测有效，

稍作修改：

.json路径修改为自己static/目录下文件路径，画删除线的两行视情况删掉，并在data()中创建tableData对象。然后此tableData就可以用于后续的table展示、数据过滤展示(模糊匹配、精确匹配-后续有介绍) 或其他用途了。

//获取本地json数据
getIdolList () {
    this.$axios.get('http://localhost:8002/static/idol.json').then((res) => {
        //用axios的方法引入地址
        this.tableData=res.data.result;
        this.perpareData(this.tableData);//页面数据构造方法
        console.log('list'+this.tableData.length);
        //赋值
        console.log(res)
    });
},

 

三、筛选（根据某列取值筛选行数据）

element table 在表格外的input输入内容实时过滤搜索表格内容显示 这是一个模糊匹配的详细例子，模糊匹配还可以使用match，如下。

        computed: {
            //过滤方法
            tables: function () {
                var _search = this.search;
                if (_search) {
                    return this.resData.filter(function (e) {
                        if (e.d_testid.match(_search)) {
                            return true;
                        }
                    })
                }
                ;
                return this.resData;
            }
        }

 

精确匹配使用===即可。

        computed: {
            //过滤方法
            tables: function () {
                var _search = this.search;
                if (_search) {
                    return this.resData.filter(function (e) {
                        if (e.d_testid === _search) {
                            return true;
                        }
                    })
                }
                ;
                return this.resData;
            }
        }

 

四、读取数据时默认筛选+页面输入框筛选组合

思路：首先根据某列值默认筛选行数据，获取中间结果数据；其次使用输入框对另一列值进行筛选，获取最终结果数据。

table默认筛选+输入框筛选：

 

五、表格数据格式调整

5.1 表头样式、表内容格式

element-ui中el-table的表头、内容样式 这里是一个通过 :header-cell-style 以及 :row-style 来设置表头数据格式及表内容数据格式的例子。若需要整个表格中数据格式相同，则可通过此方式设置。

//表头字体样式
:header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900}"

//表内容字体样式
:row-style="{fontSize:'12px',color:'#666',fontFamily:'MicrosoftYaHeiUI'}"

 

5.2 不同列数据格式不同

如果需要不同列的数据格式不同，比如转化指标采用%格式、人均指标采用两位小数格式等，可采用formatter配置。对多列进行不同配置时需要给formatterDecimal传入参数来告知目前是对哪一列进行格式设置。以下为额外传入colindex参数的例子。

                
                

        methods: {
            formatterDecimal(row, column, colindex) {
                var value = row[colindex]
                if (!isNaN(value) && value !== '') {
                    // return value //原格式
                    // return parseFloat(value).toFixed(2) // 保留两位小数

                    let valuenew = parseFloat(value) * 100
                    return parseFloat(valuenew).toFixed(2) + '%' // 百分比格式且保留两位小数
                }
            }
        }

参考：

对不同行设置不同数据格式的例子 Vue Table 表格 利用formatter属性格式化数据 。

函数添加参数示例 elementUi——组件函数钩子自带参数，不能添加参数问题

 

5.3 根据A列的值设置B列的数据格式

如果需要根据A列的值设置B列的数据格式，如A列="比例"时B列值以百分比格式显示，A列="整数"时B列以整数显示，可采用 "formatter+单元格取值判断" 进行设置。

            // d_strategyid列取值含"提升率"时colindex列以百分比格式显示，否则以原格式显示
            formatterLifting(row, column, colindex) {
                var value = row[colindex]
                var lifting = row['d_strategyid']
                if (!isNaN(value) && value !== '') {
                    if (lifting.indexOf("提升率") != -1) {
                        let valuenew = parseFloat(value) * 100
                        return parseFloat(valuenew).toFixed(2) + '%'
                    }
                    else {
                        return value
                    }

                }

            }

 

六、表格样式、数据样式调整

6.1 改变表格行的背景色

可根据 Table 组件的 row-class-name 属性来为 Table 中的某些行设置 class，通过class调整相关行的样式。



        

            
                
                
            
        


 // methods:
            tableRowClassName({row, rowIndex}) {
                var judge = row['d_judge']
                if (judge.indexOf("需要调整背景色的行") != -1) {
                    return 'judge-cell'
                }
            },

// d_judge字段含"需要调整背景色的行"时设置行class为'judge-cell'
// 也可根据需求调整为d_judge字段等于某值、大于某值……时设置行class
/* style: */ 

    .el-table .judge-cell {
        background: #F5f5f5;
    }

6.2 根据单元格取值设置字体颜色

可通过 :cell-style 属性来设置单元格字体的样式。

                    :cell-style="{
                        fontSize:'12px',
                        color:'#333',
                        fontFamily:'MicrosoftYaHeiUI',
                        'text-align':'center',
                        }"

这里给出一个嵌套的例子：对于特定行的某些列（行：COL2取值含有“提升率”的行，列：COL3和COL4），单元格取值大于0和小于0时分别设置为红色字体和绿色字体。

 

 // methods:

            setCellStyle({row, column, rowIndex, columnIndex}) {
                var value = row[column.property] //.property获取单元格的取值
                var lifting = row['col2']
                if (lifting.indexOf("提升率") != -1 && columnIndex > 2) {

                    if (parseFloat(value) > 0) {
                        return "fontSize:12px;color:red;fontFamily:MicrosoftYaHeiUI;text-align:center;font-weight:bold;"

                    } else {
                        return "fontSize:12px;color:limegreen;fontFamily:MicrosoftYaHeiUI;text-align:center;font-weight:bold;"
                    }

                }
                else {
                    return "fontSize:12px;color:#333;fontFamily:MicrosoftYaHeiUI;text-align:center"
                }

            }

注：格式在return中设置时采用 ;分隔，不能带引号,不能带{}

 

七、简短列详细列切换功能

默认显示一部分列的数据，点击按钮切换为所有列数据。



            结果数据(默认)
            明细数据

 

 

         data() {
            return {
                resData: "",//创建对象
                show: false,
            }
        },

            selectPartCol() {
                this.show = false;
            },
            selectAllCol() {
                this.show = true;
            },

 

八、数据下载功能

Vue--将页面中数据导出excel文件（导出table表格数据）参考这个即可，补充下