传送门：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表格数据）参考这个即可，补充下部分：
前者为按钮显示，后者下载图标显示，如下：
文章图片
声明：文中引用了挺多链接，仅作为学习使用，感谢各位作者给我们小白种的大树~~~~
传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)
传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)
传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)
【Web|Vue+elementUI从头开始构建前端页面(中篇-Table作妖)】
推荐阅读
- 前端|前端学习路线
- Vue基础教程|Vue基础教程(中篇）
- 如何从WP Twenty Twelve主题中删除响应代码
- 单击顶部滚动按钮时如何消除页面上的白色效果[关闭]
- 如何修复页面响应（）
- 如何修正WordPress主题中index.php默认的id=error-page
- 前端|前端——http协议、html简介、head标签、body标签、列表标签、表格标签
- 如何修复404错误，如果’name’是提交的HTML表单元素名称或WordPress的关键字
- 如何在WordPress中通过查找HTML渲染（）