传送门：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()中返回的。

文章图片

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

: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=https://www.it610.com/article/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 = https://www.it610.com/article/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 = https://www.it610.com/article/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 = https://www.it610.com/article/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表格数据）参考这个即可，补充下