element 分页列表组件2.0（附上组件代码）2020-08-17

##PageTable 组件使用添加说明

父组件操作

<PageTable ref="pageTable" :url="url" :queryParams="tableQuery" :tableColumns="tableColumns" v-on:getTableData="getSonData" :multipleSelection.sync="selectedRows" :showCheckBox="true" :showRowIndex="true"> </PageTable>

<PageTable ref="pageTables" javaService="smartPost" :height="maxHeight" :selectable=“myselectable” :showCheckBox=true :url="urljm" :queryParams="tableQuery2" :tableColumns="tableColumns2" :tableOperate="tableOperate" :multipleSelection.sync="selectedRows"></PageTable>

1、javaService=“smartPost” //服务接口

2、maxheight动态设置页面table高度 父组件 pageTable添加

:height="maxHeight"

maxHeight:document.documentElement.clientHeight - 360,

3、 是否允许多选（显示勾选框）、是否显示序号、获取指定一行或者多行信息（前提条件必须允许多选） // 是否有分页

    :showCheckBox="true"  :showRowIndex="true" :multipleSelection.sync="selectedRows"  :showPage="true" :selectable="myselectable"

3.1获取多行信息
return 定义
selectedRows: [],

3.2 控制某些行不可选择 (前提需要多选框)
1.父组件添加 :selectable=“myselectable”
2. 添加方法

	 myselectable (row, index) {
	      //  status 添加能删除row
	      return row['address3'] === '待申报' || row['address3'] === '申报失败'
	    },

4. 支持操作按钮列btns操作、switch 开关操作 formatter
   当内容过长被隐藏时显示 show-overflow-tooltip 或者添加 《el-popover》
   type:添加序号 、 fixed:固定列 、排序 sortable、 width td固定宽度 、 minWidth td最小宽度
   父组件data添加

tableColumns: [
  { prop: '', label: '序号', width: 70,type:'index', fixed: true},
  {prop: 'itemNo', width: 100, label: '项目编码'，:show-overflow-tooltip="col.show_overflow_tooltip"},
  {prop: 'bz', width: 200, label: '备注', formatter: this.BZFormatter, sortable:true},
  {prop: 'status', min-width: 120, label: '启用/停用', formatter: this.formatter, sortable:true},
  {prop: '', width: 160, label: '操作', formatter: this.btnsFormatter, fixed: 'right'}
      ]

当内容过长被隐藏时显示 tooltip
4A.

4B.
4C

data(){
	return{
	      overflowStyle: {
	        'text-overflow': '-o-ellipsis-lastline',
	        'overflow': 'hidden',
	        'text-overflow': 'ellipsis',
	        'display': '-webkit-box',
	        '-webkit-line-clamp': 3,
	        'line-clamp': 2,
	        '-webkit-box-orient': 'vertical'
	     }
}

methods:{
  BZFormatter (row) {
      return <el-popover placement="top-start" width="220" trigger="hover" placement="top" content={row.bz}><el-link underline={false} slot="reference" style={this.overflowStyle}>{row.bz}</el-link></el-popover>
    },
}

methods 添加 

formatter (row) {
      return <el-switch value={row.status} active-value="1" inactive-value="0" onChange={(status) => this.handelSwitch(row, status)} ></el-switch>
    },
    handelSwitch (row, status) {},
btnsFormatter (row) {
      return <el-button type="text" type="primary" size="mini" onClick={this.downFile.bind(this, row)}>政策文件下载</el-button>
    }

6. 支持超链接、tag、 formatter

5.1、5.2图片

 tableColumns: [
 {prop:'ptsBillStatus',width:150,label:'单据状态',formatter: this.ptsBillStatusFormatter},
 {prop: 'easBillNo', width: 180, label: 'EAS单号', formatter: this.easBillNoFormatter},
 {prop: 'payStatus', width: 120, label: '支付状态', formatter: this.payStatusFormatter},
 {prop: 'payDate', width: 160, label: '支付日期'},
 

5.1、 el-tag

// 单据状态样式重置
    ptsBillStatusFormatter (row) {
      if (row.ptsBillStatus === '待推送' || row.ptsBillStatus === '已拒绝') {
        return <el-tag type="danger">{ row.ptsBillStatus }</el-tag>
      } else if (row.ptsBillStatus === '已撤回') {
        return <el-tag type="info">{ row.ptsBillStatus }</el-tag>
      } else {
        return <el-tag>{ row.ptsBillStatus }</el-tag>
      }
    },

// 支付状态样式重置
    payStatusFormatter (row) {
      if (row.payStatus == '未支付') {
        return <el-tag type="danger">{ row.payStatus }</el-tag>
      } else {
        return <el-tag type="success">{ row.payStatus }</el-tag>
      }
    },

5.2、el-link

// EAS单号样式重置
    easBillNoFormatter (row) {
      return <el-link onClick={this.toEasDetail.bind(this, row)} underline={false} type="primary">{row.ptsBillNo}</el-link>
    },

5.3、5.4图片

5.3发票状态样式重置

    InvoiceStatusFromatter (row) {
      if (!row.date) {
        return ''
      } else if (row.date == '有效') {
        return  <span  style="color: green;"><i class="el-icon-circle-check"></i> { row.date}</span>
      } else if(row.date == '红冲'){
        return  <span style="color: red;"><i class="el-icon-circle-close" style="color: red;"></i> { row.date}</span>
      } else {
        return  <span style="color: #9c27b0;text-decoration: line-through;"><i class="el-icon-close-notification"></i> { row.date}</span>
      }
    },

5.4操作列样式重置（简单的双按钮）

operateFromatter (row) {
  let btns = []
    btns = [
      <el-button onclick={this.toPrinte.bind(this, row)} type='text' style="color:#ff9800;">{'下载'}</el-button>,
      <el-button onclick={this.revocation.bind(this, row)} type='text'>{'预览'}</el-button>
    ]
    return btns
},

6、 列固定 fixed: true, ‘left’，‘right’

7.操作双按钮

   tableOperate: {
        width: 220,
        btnType: 'text',
        btns: [
          {
            name: '删除',
            method: (row, index) => {
		    console.log('删除')
		  }
          },
          {
            name: '下载',
            method: (row, index) => {
		    console.log('下载')
		  }
          }
        ]
      },

8、 列表所有数据传入父组件

1.父组件中添加
`v-on:getTableData="getSonData"`

2.methods添加即可
` getSonData(val){
    console.log(val);
  },`

//引入组件
import PageTable from ‘@/components/common/PageTable’

PageTable 组件

<template>
  <section>
    <div :bordered="false">
      <!-- 补充插槽：通常放工具栏按钮 -->
      <div class="toolbar">
        <slot name="toolbar"></slot>
      </div>
      <!-- 表格插件 -->
      <div class="table">
        <!-- 数据渲染 -->
        <el-table :max-height="height" fit border stripe :data="contentData || tableData" v-loading="loading" :highlight-current-row="true" :header-cell-style="tableOptions.headerCellStyleObj" :row-class-name="tableOptions.rowClassName" @selection-change="handleSelectionChange" @current-change="handleCurrentRowChange" @row-dblclick="handleRowClick" ref="table" :row-key="rowKey">
          <el-table-column type="selection" :selectable="selectable" width="50" v-if="showCheckBox"></el-table-column>
          <!-- 数据列-->
           <el-table-column v-for="col in tableColumns" :key="col.prop" :prop="col.prop" :label="col.label" :fixed="col.fixed" :width="col.width" :min-width="col.minWidth" :formatter="col.formatter ? col.formatter : null" :type="col.type" :show-overflow-tooltip="col.show_overflow_tooltip">
          </el-table-column>
          </el-table-column>
          <!-- 操作按钮列-->
          <el-table-column v-if="tableOperate && tableOperate.btns" label="操作" fixed="right" :width="tableOperate.width">
            <template slot-scope="scope">
              <el-button v-for="(btn, index) in tableOperate.btns" :key="index" class="mini-button" v-show="btn.isShow?btn.isShow(scope.row):true" @click="btn.method(scope.row, index)" :icon="btn.icon" :type="tableOperate.btnType ? tableOperate.btnType : 'primary'" size="mini">{{ btn.name }}</el-button>
            </template>
          </el-table-column>
          <!-- switch 开关操作 -->
          <!-- <el-table-column v-if="tableOperate && tableOperate.switch" :label="tableOperate.name || '操作'" :width="tableOperate.width">
            <template slot-scope="scope">
              <el-switch v-if="tableOperate.switch" active-value="1" inactive-value="0" @change="tableOperate.switch.method($event, scope.row)" v-model="scope.row.status"></el-switch>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <!-- 分页插件 -->
      <div class="bottom-page" v-if="showPage">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="pageOptions.pageSizes" :page-size="pageSize" :current-page="pageIndex" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" ref="pagination">
        </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import http from '@/utils/http'
export default {
  name: 'PageTable',
  props: {
    // 是否允许多选（显示勾选框）
    showCheckBox: {
      type: Boolean,
      default: false
    },
    // 控制某些行不可选择
    selectable: {
      type: Function,
      default: (row, index) => {
        return true
      }
    },
    // 点击这一行的时候
    handleRowClick: {
      type: Function,
      default: () => {}
    },
    height: {
      type: Number,
      default: `${document.documentElement.clientHeight}` - 310
    },
    // 嵌套children
    rowKey: {
      type: String,
      default: 'id'
    },
    // 是否需要分页功能
    showPage: {
      type: Boolean,
      default: true
    },
    url: {
      // 列表url
      type: String,
      default: ''
    },
    queryParams: {
      // 查询条件
      type: Object,
      default: () => {}
    },
    tableColumns: {
      // 表头定义
      type: Array,
      default: () => [
        { selection: false, prop: 'name', width: 200, label: '列名' }
      ]
    },
    tableOptions: {
      type: Object,
      default: () => {
        return {
          rowClassName: function () {},
          headerCellStyleObj: {
            background: '#F7F6Fd',
            'font-weight': 'bold',
            height: '10px'
          }
        }
      }
    },
    tableOperate: {
      type: Object,
      default: () => {}
    },
    // 分页条属性
    pageOptions: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 50, 100, 500, 1000]
        }
      }
    },
    // 请求哪个微服务
    javaService: {
      type: String,
      default: 'post'
    },
    // 不写url时，使用此属性来定义表格内容
    contentData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      timer: '', // 列表滑动定时器
      hover: false,
      tableData: [], // 表体数据
      loading: false, // 表格loading状态
      pageIndex: 1,
      pageSize: 10,
      total: 0
      //   styleObj: {
      //     'background': '#F7F6Fd',
      //     'font-weight': 'bold'
      //   }
    }
  },
  created () {
    // 调用分页数据 查询条件已经封装成一个组件，在页面调用既可，无需在此调用
    // this.query(1)
  },
  mounted () {},
  methods: {
    // 改变分页查询的分页对象
    handleCurrentChange (pageIndex) {
      this.query(pageIndex)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.query(1)
    },
    reload () {
      this.query(1)
    },
    query (index) {
      // 无接口地址的情况
      if (!this.url) {
        this.loading = false
        return
      }
      this.loading = true
      this.pageIndex = index
      // 合并分页参数和查询条件
      let postFomr = {}
      if (this.showPage) {
        postFomr = Object.assign(
          {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          },
          this.queryParams
        )
      } else {
        postFomr = this.queryParams
      }
      // 发送请求获取数据
      http[this.javaService](this.url, postFomr)
        .then((response) => {
          if (response.success) {
            this.tableData = response.data
            this.total = response.total
            // this.getTableData(this.tableData)
          } else {
            this.$nhMessage(response.message, 'error')
          }
          // loading状态
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.total = 0
          this.tableData = []
        })
    },
    handleSelectionChange (val) {
      // console.log(val)
      this.$emit('update:multipleSelection', val)
    },
    // 当表格的当前行发生变化的时候会触发该事件
    handleCurrentRowChange (currentRow, oldCurrentRow) {
      this.$emit('currentRowChange', currentRow, oldCurrentRow)
    }
    // 列表所有数据传入父组件
    // getTableData(val) {
    //   this.$emit('getTableData', val)
    // },
  }
}
</script>
<style lang="scss" scoped>
.headerSty {
  background: #f7f6fd;
  font-weight: bold;
}
.table {
  overflow: auto;
  position: relative;
}
.bottom-page {
  // float: right;
  text-align: right;
  margin-top: 30px;
}
.toolbar {
  // padding-bottom: 12px;
}
</style>