el-table排序以及echarts数据视图优化

最新推荐文章于 2024-01-26 16:54:22 发布

转载最新推荐文章于 2024-01-26 16:54:22 发布 · 502 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/menghuannvxia/article/details/82967808?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%20%20%E6%95%B0%E6%8D%AE%E8%A7%86%E5%9B%BE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-82967808.firs

文章标签：

#vue.js #html5 #css

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

java基础复习

5 篇文章

订阅专栏

本文介绍如何在Vue项目中使用el-table组件实现前后端交互排序，并展示一种echarts图表数据视图优化的方法。

一、el-table排序
1、java

 @RequestParam(value="prop", required=false) String prop,
 @RequestParam(value="sort", required=false) String sort,


/*排序*/
		String sortStr="";
		if ((prop!=""&&prop!=null)&&(sort!=""&&sort!=null)){
			sortStr="order by"+" "+prop+" "+sort;
		}else {
			sortStr="order by id DESC";
		}

sql：	"${sortStr} limit #{currPosition}, #{pageSize}",

2、vue

 <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="载入中"
      border
      fit
      stripe
      highlight-current-row
      :height="tableHeight"
      @sort-change="sortChange"
    >
     

      <el-table-column label="手续费" width="180px" align="center"  sortable="custom" prop="fee">
        <template slot-scope="scope">
          <span>{{ scope.row.fee }}</span>
        </template>
      </el-table-column>
  
    </el-table>

    <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

info: {
        prop:"",
        sort:"",
      },

    /*排序*/
    sortChange:function(column,prop,order){
      /*      console.log(column)
            console.log(prop)
             console.log(order)*/
      if (column.order=="descending"){
        this.info.sort="DESC"
        this.info.prop=column.prop
      }else if (column.order=="ascending") {
        this.info.sort="ASC"
        this.info.prop=column.prop
      }
      this.getList()

    },

    getList() {
      var url = this.HOST + '/xxx/xxxx?page=' + this.listQuery.page + '&rows=' + this.listQuery.limit
      var qs = require('qs')
      var instance = this.$axios.create({
        headers: { 'content-type': 'application/x-www-form-urlencoded' }
      })
      instance.post(url, qs.stringify(this.info))
        .then((response) => {
          const res = response.data
          if (res.needReLogin === 1) {
            this.$store.dispatch('LogOut').then(() => {
              location.reload()
            })
          }
          this.listLoading = false
          this.list = res.rows
          this.total = res.total

        })
    },

二、echarts数据视图优化
转载于：添加链接描述


optionToContent: function (opt) {
    let axisData = opt.xAxis[0].data; //坐标数据
    let series = opt.series; //折线图数据
    let tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头
    let tdBodys = ''; //数据
    series.forEach(function (item) {
        //组装表头
        tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
    });
    let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
    for (let i = 0, l = axisData.length; i < l; i++) {
        for (let j = 0; j < series.length; j++) {
            //组装表数据
            tdBodys += `<td>${ series[j].data[i]}</td>`;
        }
        table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
        tdBodys = '';
    }
    table += '</tbody></table>';
    return table;
}