分页列表组件

置顶同块柴

已于 2022-01-20 17:10:02 修改

阅读量535

点赞数 3

分类专栏： vue 文章标签： javascript

于 2021-08-30 16:59:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44668908/article/details/120000672

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

##PageTable 组件使用添加说明

父组件操作

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

支持操作按钮列btns操作、switch 开关操作

父组件data添加

 tableOperate: {
   width: 120,
   name:'操作信息',
   btns: [ {name: '查看详情', method: (row, index) => { this.handleView(row) }} ],
   switch: {  method: ($event, row) => {}},

支持超链接、tag、method

父组件data添加

  `tableColumns: [
        {prop: 'ptsWsBillNo', width: 160, label: '单据编号', fixed: true, link: true, method: this.handleDetail, tag: this.formatter2}, 
    ]`

methods 添加

2.0 列固定 fixed: true,
请添加图片描述

2.1 文字颜色显示控制
formatter (row) { if (row === '非正常') { return 'danger' } else { return 'success' } },
2.2蓝色样式点击弹框详情操作 link: true, method: this.handleDetail,
请添加图片描述

		handleDetail(row,index) {  //查看详情
		      console.log(row)
		      this.declareDetail = row
		      this.detailDialog.show = true 
		    },

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

    :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'] === '申报失败'
	    },

列表所有数据传入父组件

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

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

5.maxheight设置父组件 pageTable添加

:height="maxHeight"

maxHeight:document.documentElement.clientHeight - 360,

//引入组件
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">
          <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" :formatter="col.formatter ? col.formatter : null">
          </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
    },
    // 是否需要分页功能
    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>

return <el-button type="text" onClick={this.getInvokeDetail.bind(this, row)}>{row.reduceAmount}</el-button>
 formatter (row) {
      return <el-switch value={row.status} active-value="1" inactive-value="0" onChange={(val) => this.handelSwitch(row, val)} ></el-switch>
    },
    handelSwitch (row, status) {
      const data = {
        status: status,
        itemId: row.id
      }
      this.$api.reductionItem.updateStatus(data).then(res => {
        if (res.success) {
          this.query()
          this.$message({message: res.message, type: 'success'})
        } else {
          status = !status
          this.$message.error(res.message)
        }
      }).catch(() => {
        status = !status
      })
    },
    btnsFormatter (row) {
      return <el-button type="text" type="primary" size="mini" onClick={this.downFile.bind(this, row)}>政策文件下载</el-button>
    },