当前位置:   article > 正文

Element-UI对Table表格的简单封装_封装element中的table表格

封装element中的table表格

问题描述:我们再开发中有时候会遇到相同功能表格,这个时候会将表格进行封装拆分处理。这里暂时记录一下简单的封装,加上一些必要的属性,其他属性有需要再加上去。

一,简单封装Table表格组件

1,Table子组件

<template>
  <div class="TableGrid">
    <el-table
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :max-height="tableData.maxHeight"
      :data="tableData.data"
      @selection-change="handleSelectionChange">
      <!-- 遍历 columns -->
      <template v-for="(item, index) in tableData.columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="50"
          fixed="left"
          align="center"
          :key="index"></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="100"
          fixed="left"
          label="序号"
          :index="item.indexMethod"
          :key="index"></el-table-column>
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"></slot>
        <!-- 常规字段 -->
        <el-table-column
          v-else
          show-overflow-tooltip
          v-bind="item"
          :min-width="item.minWidth"
          :key="index"></el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="tableData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Object,
      default() {
        return {
          columns: {
            type: Array,
          },
          data: {
            type: Array,
          },
          total: {
            type: Number,
          },
        };
      },
    },
  },
  data() {
    return {
      pagination: {
        pageSize: 10,
        currentPage: 1,
      },
    };
  },
  methods: {
    // 切换页码
    handleCurrentChange() {
      this.$emit('getData', this.pagination);
    },
    // 切换选择
    handleSelectionChange(val) {
      this.$emit('changeSelection', val);
    },
  },
};
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97

2,Table父组件

<template>
  <div>
    <Table
      ref="table"
      :table-data="tableData"
      @getData="getList"
      @changeSelection="changeTableSelection">
      <el-table-column
        slot="action"
        align="center"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        columns: [
          {
            selection: true,
          },
          {
            index: true,
            indexMethod(index) {
              return index + 1;
            },
          },
          {
            prop: 'name',
            label: '姓名',
            fixed: 'left',
          },
          ...
          {
            slot: 'action',
          },
        ],
        data: [],
        total: 0,
      },
    };
  },
  methods: {
  	// 获取数据
  	getList(pagination = { currentPage: 1, pageSize: 10 }) {
  	  ...
  	  // 请求到数据后,重新设置分页器(用于一些主动查询场景)
  	  this.$refs.table.pagination = {
        ...pagination,
      };
  	},
    // 切换选择
    changeTableSelection(val) {
      console.log(val);
    },
    // 操作
    showDetail(row) {
      console.log(row);
    },
  },
};
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

二,复杂的封装Table表格组件

1、子组件Table的封装

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" border v-loading="load">
          <template v-for="(item, index) of table">
            <!--if判断的是父组件传的表头是操作的id名,对需要特殊处理的列进行特殊的处理-->
            <el-table-column
              v-if="item.id === 'operation'"
              :key="index"
              :prop="item.id"
              :label="item.name"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
            >
              <!--可以自行增加按钮,请改变点击事件的第二个参数,父组件会根据第二个参数判断当前点击的是什么按钮-->
              <template slot-scope="scope">
                <el-button
                  v-for="item1 in item.list"
                  :key="item1.id"
                  @click="examine(scope.row, item1.id)"
                  type="text"
                  size="small"
                  >{{ item1.name }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.id === 'sectionName'"
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
              <template slot-scope="scope">
                <span
                  style="color: blue; cursor: pointer"
                  @click="
                    details('断面详情-' + scope.row.sectionName, scope.row._id)
                  "
                  >{{ scope.row.sectionName }}</span
                >
              </template>
            </el-table-column>
            <!-- 定义了一个全局过滤器,可以将毫秒数转化为日期格式 -->
            <el-table-column
              v-else-if="item.id === 'sectionUpdateTime'"
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
              <template>{{ item.sectionUpdateTime | dateFormat }}</template>
            </el-table-column>
            <!--可以传align,width和type来控制表格的居中,宽度和类型(比如需要序号,type传index)-->
            <el-table-column
              v-else
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
            </el-table-column>
          </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'tableList',
  // 父组件传过来的值
  props: ['table', 'tableData', 'load'],
  methods: {
    // 调用父组件的方法
    examine(rows, id) {
      this.$emit('operation', { id: id, rows: rows })
    },
    details(name, id) {
      this.$emit('toDetails', { name, id })
    },
  },
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91

2,在父组件引入注册表格组件

import TableList from '@/com/table.vue'
----------------
export default {
 components: {
    TableList
  },
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3,在父组件template中使用表格组件

<template>
  <div style="height: 100%">
    <table-list
      :table="table"
      :tableData="tableData"
      @operation="getExamine"
      @toDetails="details"
      :load="load"
    ></table-list>
  </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

4,在父组件data中定义表格展示数据

 data() {
    return {
      load: false, //是否有加载动画
      table: [
        //表头
        { type: 'selection' },
        { type: 'index', name: '#' },
        { id: 'sectionName', name: '名称' },
        { id: 'sectionMaintainGrid', name: '数据维护' },
        { id: 'sectionPublic', name: '是否公有' },
        { id: 'sectionMaintainer', name: '数据维护人' },
        { id: 'sectionUpdateTime', name: '最新修改时间' },
        {
          id: 'operation',
          name: '操作',
          list: [
            { id: 'examine', name: '查看' },
            { id: 'compile', name: '编辑' },
            { id: 'delete', name: '删除' },
          ],
        }, // id名是固定的,如若改变,请同时改变table组件对应的地方
      ],
      tableData: [
        // 数据内容
        {
          sectionName: '北京',
          sectionMaintainGrid: '华北电网',
          sectionPublic: '是',
          sectionMaintainer: '小北',
          sectionUpdateTime: new Date().getTime(),
        },
      ],
    }
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

5,在父组件methods定义表格将要调用的方法

 methods: {
   getExamine(e) {
     // 根据table组件传的不同的id进行不同的操作
    //to do something
   },

   details(e) {
    // to to something
   },
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/621615
推荐阅读