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()中返回的。

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

: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)
    });
},

<script>
    export default {
        data() {
            return {
                resData: "",//创建对象
            }
        },
        created() {
            this.getIdolList();
        },
        methods: {
            //获取本地json数据
            getIdolList() {
                this.$axios.get('../../static/test.json').then((resData) => {
                    this.resData = resData.data.result
                    //赋值
                    console.log(resData)
                });
            },
   
        }
        ,
    }
</script>

 

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

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 === _searc