vue中使用vue-easytable【强大的表格工具】

1.cdn引入

<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css"> 
<!-- 引入组件库 --> 
<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script> 

2.直接使用use.vue

<style lang="scss" scoped>
  .forward-market-outer-box {
    background: #f7f7f7;
    .table-box {
      padding: 0 13px 0 13.5px;
      background: #fff;
      margin-top: 10px;
      .v-table-views {
        border: 0;
      }
    }
  }
</style>
<style>
  .forward-market-outer-box .v-table-title-cell {
    margin: 0;
    border: 0 solid #ebebeb;
  }
  .forward-market-outer-box .v-table-body-cell {
    margin: 0;
    border: 0 solid #ebebeb;
  }
  .forward-market-outer-box .v-table-row:last-child .v-table-body-cell {
    margin: 0;
    border: 0 solid #fff;
  }
  .forward-market-outer-box .title-cell-class-name {
    font-size: 13px;
    color: #666;
  }
  .forward-market-outer-box .column-cell-class-name-first {
    font-size: 13px;
  }
  .forward-market-outer-box .column-cell-class-name-red {
    color: #b90901;
    font-size: 15px;
  }
  .forward-market-outer-box .column-cell-class-name-green {
    color: #1ca601;
    font-size: 15px;
  }
</style>
<template>
  <div class="forward-market-outer-box flex-wrapper">
    <div class="table-box">
      <v-table is-horizontal-resize=""
               style="width:100%"
               multiple-sort
               :columns="columns"
               :table-data="tableData"
               @sort-change="sortChange"
               :show-vertical-border="false"
               :row-click="rowClick"
               :column-cell-class-name="columnCellClass"
               row-hover-color="#fff"
               row-click-color="#edf7ff"></v-table>
    </div>
  </div>

</template>


<script>

  export default {
    name: 'sort-by-multiple-columns',
    data() {
      return {
        tableData: [
          { "name": "熊猫金币30g", "last": "156.1", "percent": "-1.76", "earning": "5.6" },
          { "name": "黄金9995", "last": "182.1", "percent": "1.06", "earning": "12.5" },
          { "name": "国际版黄金9999", "last": "161.0", "percent": "-0.76", "earning": "18.2" },
          { "name": "白银T+D", "last": "197.1", "percent": "1.26", "earning": "14.7" },
          { "name": "Mini黄金T+D", "last": "183.6", "percent": "2.76", "earning": "18.7" }
        ],
        columns: [
          { field: 'name', title: '名称', width: 50, titleAlign: 'left', columnAlign: 'left', titleCellClassName: 'title-cell-class-name', isResize: true },
          // formatter: function (rowData, rowIndex, pagingIndex, field) {
          //   return rowIndex < 3 ? '<span style="color:red;font-weight: bold;">' + (rowIndex + 1) + '</span>' : rowIndex + 1
          // }          
          { field: 'last', title: '最新', width: 50, titleAlign: 'right', columnAlign: 'right', titleCellClassName: 'title-cell-class-name', isResize: true },
          { field: 'percent', title: '涨幅%', width: 50, titleAlign: 'right', columnAlign: 'right', titleCellClassName: 'title-cell-class-name', orderBy: 'desc', isResize: true },
          { field: 'earning', title: '涨跌', width: 50, titleAlign: 'right', columnAlign: 'right', titleCellClassName: 'title-cell-class-name', isResize: true }
        ]
      }
    },
    methods: {
      columnCellClass(rowIndex, columnName, rowData) {
        // 给所有行设置className
        if (columnName === 'name') {
          return 'column-cell-class-name-first';
        }
        // 给涨为红
        if (columnName !== 'name' && rowData.percent >= 0) {
          return 'column-cell-class-name-red';
        }
        // 给跌
        if (columnName !== 'name' && rowData.percent < 0) {
          return 'column-cell-class-name-green';
        }
      },
      rowClick(rowIndex, rowData) {
        console.log(rowIndex);
        console.log(rowData);
      },
      // 获取 table 组件每次操作后的参数（重新去请求数据）
      sortChange(params) {
        console.log(params)
      }
    },
    created() {
      //加载屏关闭
      setTimeout(() => {
        document.getElementById('login').style.display = 'none';
      }, 250);
    },
    components: {
    },
    computed: {

    },

    mounted() {
      
    }
  }
</script>