【ele-pro-table】表格一些常用方法

 一、【ele-pro-table】表头跨两列合并表头

（一）、使用 :header-cell-style="headerCellStyle"方法

header-cell-style

表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

Function({row, column, rowIndex, columnIndex})/Object

<ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" row-key="id"
        :selection.sync="selection" height="calc(100vh - 480px)" :header-cell-style="headerCellStyle">
       
  //一些内容

 </ele-pro-table>

主要看headerCellStyle这个方法：
rowIndex代表当前行号（行索引），columnIndex 代表当前列号（列索引）
比如说表头是第一行，行号是0，表头第一行第一列，行号和列号都是0

rowspan规定单元格可占据的行数
colspan属性规定单元格可横跨的列数

methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row[0].level == 1) {
        row[14].colSpan = 2
        row[13].colSpan = 0
        // row[3].colSpan = 0
        if (columnIndex === 13) {
          return { display: 'none' }
        }
      }
    },
}

注：

 row[14].colSpan = 2，需要合并的行数------14
 row[13].colSpan = 0，被合并的行数-------13，隐藏并colSpan=0，会解决fixed格式问题

二、【ele-pro-table】表格的表头的某项添加提示信息 

 注：可以借鉴el-table表格

 1.在表格列配置columns当中选择要添加信息的el-table-column单元格

例：{
          slot: "class",
          label: "角色等级",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 200,
          renderHeader: this_.getheaderCellStyle
       }

在配置项中添加：renderHeader

2.在data里面写

 data() {

    let this_ = this

}

 3.在methods里getheaderCellStyle方法，将你要添加的信息直接return出去

getheaderCellStyle() {
      return <span>
          角色等级
        <el-tooltip placement="top-start" >
         <div slot="content" class='p'>
         <p>内部管理：拥有所有项目的指定权限；</p> 
         <p> 项目管理：拥有指定项目内所有游戏的指定权限；</p>
         <p> 普通角色：拥有指定游戏的指定权限</p>
        </div>
        <i class="el-icon-question role"></i>
        </el-tooltip>
        </span>
    },

三、单元格里面截取数据

 <template slot="server_name" slot-scope="{ row }">
          <div class="flex column">
            <span>
              <template v-for="(item, index) in row.server_name">
                <span v-if="index <= 4" :key="item"> {{ (row.server_name.length > 5 && index == 4) ? (item + "...") :
                  (index == row.server_name.length - 1) ? item : (item + ",") }}</span>
              </template>
            </span>
            <el-button key="lookall" v-prevent-re-click type="text" v-if="row.server_name.length > 5" size="small"
              @click="openEdit(row)">查看全部</el-button>
          </div>


          <!-- <el-button v-prevent-re-click type="primary" class="ele-btn-icon" @click="openEdit(row)">查看
          </el-button> -->
        </template>

四、在表格当中插入一行数据

 注：找到渲染表格的数组（this.url）,根据你需要的条件，判断，通过splice方法插入所需要的数据

:span-method="spanMethod"---------方法可以实现合并行或列

 this.url.forEach((res, index) => {
            if (res.server_name == '合计') {
                this.url.splice(index + 1, 0, { server_name: '渠道分类数据' })

            }
        })


 methods: {
        spanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log(columnIndex);
            // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性

            if (row.server_name == '渠道分类数据' || row.server_name == '游戏分类数据' && row && column.label == '日期') {

                // console.log(row, column, rowIndex, columnIndex);

                return {
                    rowspan: 1,
                    colspan: 23,
                    // align: 'center' // 居中对齐
                };

            }

        },
}

五、隐藏表格表头的工具栏

 在ele-pro-table上加-------:toolbar="false"

六、slot和prop

<ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" row-key="id"
        :selection.sync="selection" height="calc(100vh - 480px)" :header-cell-style="headerCellStyle">
       
  //一些内容

 </ele-pro-table>

 :columns="columns"设置表头标题的数据

例如：

columns=[

{
          slot: 'date',//绑定后端返回的字段

          label: '日期',

          minwidth: 100,

          align: 'center',

          showOverflowTooltip: true,

          // fixed: 'left',

        },

        {

          prop: 'pay_money',//绑定后端返回的字段

          label: '天气',

          showOverflowTooltip: true,

          // minWidth: 100,

          align: 'center',

          // fixed: "left",

        },

]

slot插槽：

表格中的插槽是一种非常有用的功能，它允许您在表格中插入自定义内容。在使用构建表格时，您可以使用插槽来自定义表格的行和列，例如：

   <template slot="date" slot-scope="{ row }">
          
   </template>

prop:

用于指定该列对应数据源中的字段名，也可以ele-pro-table表格自带的prop当中的方法，在表格中插入自定义内容，更改列表里面的数据格式，例如：

       {
          prop: 'date',
          label: '日期',
          showOverflowTooltip: true,
          // minWidth: 100,
          align: 'center',
          formatter: (row, column, cellValue) => {
            if (row.date !== this.$t('analysisData.table.text29') && row.date !== 
              this.$t('analysisData.table.text30')) {
              if (cellValue == '-') {
                return cellValue
              } else {
                return cellValue + '%'
              }
            } else {
              return ''
            }
            
          },
        },

注：formatter:(row, column, cellValue)=>{  //一些判断条件..........}

七、设置主表返回解析格式

:parseData='parseData'绑定到ele-pro-table

例如：

 <ele-pro-table ref="table" :where="where" :datasource="url" :parseData="parseData" 
   :columns="getcolumns" :selection.sync="selection" >
 </ele-pro-table>

methods: {
 //设置主表返回解析格式
    parseData(val) {
      // console.log(val,'返回val=====');
      val['count'] = val.ext.count
      return val
    },
 }

八、ele-pro-table在A父组件当中，在B子组件中刷新表格数据

例如：

A组件：
<template>
  <div class="ele-body">
      <!-- 数据表格 -->
      <ele-pro-table  
        ref="table"
        :where="where"
        :datasource="url"
        :columns="getcolumns"
        :selection.sync="selection"
        height="calc(100vh - 315px)"
        :parseData="parseData"
        :loading="false"
        :initLoad="false">

          //一些操作~~~~~
      
       </ele-pro-table>

       <!-- 子组件 -->
     <B :data="current" :visible.sync="showEdit" @done="reload" />

  </div>




 methods: {

   /* 刷新表格 */
    reload() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.url = '后台提供的接口'
          this.$refs.table.reload({ where: this.where })//刷新表格的方法
          //where: this.where-------接口需要传入的参数，不需要传参可以不用写
        } else {
          this.url = []
        }
      })
    },


}

</template>

B组件
<template>
   <div slot="footer">
      <el-button v-prevent-re-click @click="updateVisible">点击刷新</el-button>
    </div>

 methods: {
   updateVisible（）{
      this.$emit("done");
    }

}
</template>

九、表格排序

（一）、ele-pro-table自定义的方法

getcolumns() {
      const columns = [
        {
          prop: 'Date',
          label: '测试题目',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
          sortable: 'custom',//对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序
        },
   ]
  }

//相当于后端接口字段情况如下:

(二)、 @sort-change="sortChange"

 <ele-pro-table
   ref="table"
   :where="where"
   :datasource="OverviewList"
   :columns="getcolumns"
   :selection.sync="selection"
   height="calc(100vh - 415px)"
   method="POST"
   @sort-change="sortChange"
   :parseData="parseData"
   :needPage="false">

      //一些操作~~~~

   </ele-pro-table>

methods: {
    sortChange({ column, prop, order }) {
      console.log(column, prop, order, '排序======================')
      if (order) {
        //this.where.sort = prop
        if (order == 'ascending') {
          this.where.order = 'asc'//升序
        } else {
          this.where.order = 'desc'//降序
        }
        
        this.reload()//最后再次调用请求接口的方法
      }
    },
 }

十、表格底部页签调整

示例展示： 

 

解决方法： 

 注释： 

1.page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

2.page-size每页显示数量。

十一、编辑表格当中的数据

1.使用slot插槽

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="getcolumns"
        :selection.sync="selection"
        height="calc(100vh - 315px)"
        :parseData="parseData"
        method="POST"
      >
        <template slot="channel" slot-scope="{ row }">
           //btn 控制span input的显示与隐藏
          <span v-if="!btn">哈哈</span>
          <div v-else>
            <el-input
              v-model="showNum"
              clearable
              :placeholder="'-' + $t('comment.placeholder.input') + '-'"
            ></el-input>
          </div>
        </template>
        <template slot="recharge_num" slot-scope="{ row }">
         //操作~~~~
          <el-link type="primary" @click="BtnEdit">点击</el-link>
        </template>
      </ele-pro-table>

2.设置一个变量btn

3.点击事件控制变量

    BtnEdit() {
      this.btn = !this.btn;
    },