基于element-ui表格的二次封装实现

更新时间：2022年07月14日 15:01:51 作者：Kepler明

本文主要介绍了基于element-ui表格的二次封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装

写一个Table组件

首先先写表格样式

    <el-table
      :data="tableData"
      :header-cell-style="headerStyle"
      :height="height"
      :border="border"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if='selection'
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="v in tableProp"
        :key="v.label"
        :prop="v.code"
        :sortable='v.sortable'
        :label="v.label"
        :width="v.width"
      >
        <template slot-scope="scope">
          <div v-if='!v.code'>
            {{ scope.row[scope.column.property] }}
          </div>
          <div v-else>
              <slot name="row" :row="scope.row"></slot>
          </div>
        </template>
        <el-table-column
          v-for="(item, i) in v.data"
          :key="i"
          :sortable='item.sortable'
          align="center"
          :width="item.width"
          :prop="item.code"
          :label="item.label"
        >
          <template slot-scope="scope">
              <div v-if='!v.code'>
                {{ scope.row[scope.column.property] }}
              </div>
              <div v-else>
                  <slot name="row" :row="scope.row"></slot>
              </div>
          </template>
        </el-table-column>
      </el-table-column>
       <el-table-column label="操作" v-if='ishandle'>
        <template slot-scope="scope">
          <slot name="edit" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </el-table>

tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作

export default {
  props: {
    height: {
      type: Number,
      default: 220,
    },
    ishandle:{
      type: Boolean,
      default: false,
    },
    border:{
      type: Boolean,
      default: false,
    },
    tableProp: {
      type: Array,
      default: () => [
        {
          code: 'index',
          label: '指标',
          width: 100,
        },
        {
          code: 'PAC',
          label: 'PAC',
          width: 120,
          data:{
            code: 'PAB',
            label: 'PAB',
            width: 60,    
          }
        },
        {
          code: 'PAM',
          label: 'PAM',
          width: 60,
          code:true,
        },
        {
          code: 'POWER_CONSUMPTION',
          label: '综合电耗(kW·h)',
          width: 50,
        },
        {
          code: 'WATER_CONSUMPTION',
          label: '自用水率(%)',
        },
      ],
    },
    tableData: {
      type: Array,
      default:() => [
        {
          index:1,
          PAC:'1'
          PAM:'1',
          POWER_CONSUMPTION:'1',
          WATER_CONSUMPTION:'1'
        }
      ]
    },
    Style:{
      type:String,
      default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;'
    }
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
  // 样式
    headerStyle() {
      return this.Style;
    },
    // 多选
    handleSelectionChange(val){
      this.$emit('SelectionChange',val)
    }
  },
};

第二步加分页

<el-pagination
      :background='background'
      :layout="layout"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="current"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page='singlepage'
      >
    </el-pagination>

background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发

export default {
  props: {
    background: {
      type: Boolean,
      default: false,
    },
    layout:{
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    total:{
      type: Number,
      default: 100,
    },
    pageSize:{
      type: Number,
      default: 10,
    },
    pageSizes:{
      type: Array,
      default: () => [10, 20, 30, 40, 50, 100],
    },
    singlepage: {
      type: Boolean,
      default: false,
    },
    current:{
      type: Number,
      default: 1,
    },
  },
  methods: {
    // pageSize 改变时会触发
    handleSizeChangepageSize (val) {
      this.$emit('handleSizeChangepageSize ',val)
    },
    // currentPage 改变时会触发
    handleCurrentChange(val){
      this.$emit('handleCurrentChange',val)
    }
  },
};

在页面中使用

先引入Table.vue页面

        <Table
          :height="90"
          class="left-top-table"
          :tableData="tableIndex"
          :tableProp="tableProp"
          @handleCurrentChange='handleCurrentChange'
          @handleSizeChangepageSize ='handleSizeChangepageSize '
        >
          <template slot="edit" slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.index, scope.row)"
              >编辑</el-button
            >
          </template>
        </Table>

//pageSize 改变时会触发
handleCurrentChange(val){
....
}
// currentPage 改变时会触发
handleSizeChangepageSize (val){
....
}
// 编辑方法
handleEdit(index,row){
....
}

更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形

到此这篇关于基于element-ui表格的二次封装实现的文章就介绍到这了,更多相关element表格二次封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue-router：嵌套路由的使用方法
本篇文章主要介绍了vue-router：嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
Vue中的directive指令快速使用
这篇文章主要介绍了Vue中的directive指令快速使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue异步加载dom元素之后无法获得的解决
这篇文章主要介绍了vue异步加载dom元素之后无法获得的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue arco.design锚点Anchor使用方式
这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
VueJs打包之后遇到的坑及解决
这篇文章主要介绍了VueJs打包之后遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue项目动态设置iframe元素高度的操作代码
在现代Web开发中,iframe元素常用于嵌入外部内容到当前网页中,比如在线文档、视频播放器或是广告,Vue框架提供了强大的工具来解决这个问题,通过动态设置iframe元素的高度,我们可以确保页面布局既美观又高效,本文给大家介绍了vue项目动态设置iframe元素高度的操作
2024-10-10
在Vue3项目中使用如何echarts问题
这篇文章主要介绍了在Vue3项目中使用如何echarts问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue-router钩子函数实现路由守卫
这篇文章主要介绍了vue-router钩子函数实现路由守卫，对vue感兴趣的同学，可以参考下
2021-04-04
超详细的vue组件间通信总结
作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下
2021-07-07
vue3.x使用swiperUI动态加载图片失败的解决方法
这篇文章主要为大家详细介绍了vue3.x使用swiperUI动态加载图片失败的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07

基于element-ui表格的二次封装实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具