vue列表简单封装

原创已于 2022-04-08 16:37:40 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-08 15:04:01 首次发布

elementUi 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了一种使用Vue.js封装表格组件的方法，该组件支持多表控制，包括数据加载、默认排序、多选操作以及自定义列显示。通过监听`selection-change`和`current-change`事件来处理选择和当前行变化，同时提供了分页功能。文章还展示了具体的模板和脚本代码，包括数据转换和过滤方法的实现。

Vue封装table实现功能多表控制

封装
一、列表

<template>
  <div>
    <!--  selectList定义接收字段  tableList获取数据 defaultSort定义默认排序 handleSelectionChange多选方法-->
    <el-table :data="tableList" :default-sort="defaultSort||''"
              @selection-change="handleSelectionChange"
              @current-change="handleSelectionChange"
              class="table"
              border
              width="100%"
              row-key="id"
              :tree="{id:'id',children:'children'}">
      <!--定义序号-->
      <el-table-column width="68" align="center" label="序号">
        <template slot-scope="scope">
          <div v-if="Object.keys(scope.row).length">
            {{scope.$index + 1 + (params.pageSize * (params.pageNum - 1) || 0) }}
          </div>
        </template>
      </el-table-column>
      <!--多选框-->
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(item,index) in selectList" v-if="item.show" :key="index" :sortable="item.sorBooleam"
                       :prop="item.key"
                       :label="item.label" :width="item.width" min-width="100" :show-overflow-tooltip="true"
                       :filters="item.filter"
                       :filter-method="item.filters ? filterHandler :null">
        <!--   定义接收数据转换展示     -->
        <template slot-scope="scope">
          {{item.fn ? item.fn(scope) : scope.row[item.key]}}
        </template>

      </el-table-column>
      <slot></slot>
    </el-table>
    <!-- 分页 -->
    <pagination class="pagination" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 20
        },
      }
    },
    mounted() {
      this.params = this.queryParams || this.params;
    },
    //注册
    props: ['tableList', 'selectList', "defaultSort", "baseIndex", 'total'],
    methods: {
      handleSelectionChange(select) {
        console.log(select);
        this.$emit("select-change", select);
      },
      getList() {
        this.$emit("queryStable");
      },
      filterHandler(value, row, column) {
        console.log(value, row, column)
        const property = column['property'];
        return row[property] === value;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table {
    width: 100%;
  }

  /deep/ .el-table--border td:first-child .cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>