管理系统-表格页面封装-vue-element

组件代码

<template>
  <div>
    <!-- :header-cell-style="{ background: '#fafafa' }" tooltip-effect="dark" -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%">
      <template v-for="(rowItem, rowIdx) of tableColumn">
        <el-table-column v-if="rowItem.slots" :key="rowIdx" :label="rowItem.label" :width="rowItem.width">
          <template slot-scope="scope">
            <slot :name="rowItem.slots.name" v-bind="scope"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else :key="rowIdx" :prop="rowItem.prop" :label="rowItem.label" :width="rowItem.width"></el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="total && query"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query[PAGE_NUM_KEY]"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="query[PAGE_SIZE_KEY]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    // 列表数据
    tableData: { type: Array, default: () => [] },
    /** 示例
      tableColumn: [
        { prop: 'key1', label: '名称', width: 180 },
        { prop: 'createTime', label: '更新时间', minWidth: 100 },
        { slots: { name: 'column-todo' }, label: '操作', width: 200 },
      ]
     */
    tableColumn: { type: Array, default: () => [] },
    total: Number, // 表格数据总条目数
    query: Object, // 表单对象 含分页数据
    pageMethod: Function, // 表格翻页方法
    searchMethod: Function, // 表格查询方法
    resetMethod: Function, // 表单重置方法
    loading: Boolean // 查询loading
  },
  data() {
    return {
      PAGE_NUM_KEY: 'pageNum',
      PAGE_SIZE_KEY: 'pageSize'
    }
  },
  created() {},
  methods: {
    // 设置每页数据大小
    handleSizeChange(size) {
      this.query[this.PAGE_NUM_KEY] = 1
      this.query[this.PAGE_SIZE_KEY] = size
      console.log(this.query)
      this.searchMethod && this.searchMethod()
    },
    // 点击切页
    handleCurrentChange(val) {
      this.query[this.PAGE_NUM_KEY] = val
      this.pageMethod && this.pageMethod()
    }
  }
}
</script>

<style lang="scss" scoped>
// 分页样式
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>

 

使用：

<TableList :pageMethod="getTableData" :table-data="roleList" :tableColumn="tableColumn" :query.sync="query" :total="total" :loading="loadings.table">
  <template v-slot:column-todo="props">
    <el-button class="prohibitclick" @click="editRole(props.item)" type="text" size="small">编辑</el-button>
    <el-button class="prohibitclick" @click="delRole(props.item)" type="text" size="small">删除</el-button>
  </template>
</TableList>

tableColumn: 

[
  { prop: 'id', label: '字段id', width: 180 },
  { prop: 'createTime', label: '创建时间', width: 180 },
  { prop: 'updateTime', label: '更新时间' },
  { slots: { name: 'column-todo' }, label: '操作', minWidth: 100 },
]

 

listMixin.js  公共逻辑抽离

export const listMixin = {
  components: {},
  data() {
    return {
      tableData: [],
      loadings: false,
      total: 0, // 列表内所有数据的长度
      // 列表查询字段
      query: {
        pageNum: 1, // 初始页
        pageSize: 10, // 当前页面内的列表行数,
        keyword: ''
      },
      PAGE_NUM_KEY: 'pageNum',
      PAGE_SIZE_KEY: 'pageSize'
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 列表请求接口
    // tableListApi(params) {
    //   return xxxxApiList(params)
    // },
    // 获取表格列表
    getTableData() {
      this.loadings = true
      const params = {
        ...this.query
      }
      // console.log('列表请求', params)
      this.tableListApi(params)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.records
            this.total = res.data.total
            this.getListSucessCb && this.getListSucessCb()
          } else {
            this.$message({
              message: res.msg,
              type: 'warning'
            })
          }
        })
        .finally(() => {
          this.loadings = false
        })
    },
    // 刷新列表
    refresh() {
      this.query[this.PAGE_NUM_KEY] = 1
      this.getTableData()
    }
  }
}