vue2对el-table二次封装

最新推荐文章于 2024-05-29 08:52:09 发布

TJJ.yaml

最新推荐文章于 2024-05-29 08:52:09 发布

阅读量382

点赞数 1

分类专栏：程序员 vue element 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46630629/article/details/129203718

版权

程序员同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

在项目中会多次使用表格展示数据。不对这个table进行二次封装成我们自己想要的，重复的代码量的工作会比较大

<template>
  <div>
    <el-table size="mini" ref="myTable" :data="tableData" border height="calc(100vh - 238px)" :header-cell-style="{
      'text-align': 'center',
      background: '#eaf3fe',
      color:'black',
      'line-height': '12px'
    }" :cell-style="{ 'text-align': 'center', padding: '0'}" bgcolor="#00FF00" @row-dblclick="dbSelected"
      @row-click="urlSelect" :row-class-name="tableRowClassName" :row-style="isRed">
      <template v-for="item in tableItem ">
        <el-table-column v-if="item.flag" :key="item.ID" :label="item.value" :prop="item.key" :width="item.width"
          show-overflow-tooltip></el-table-column>
      </template>
      <slot name="serviceInner"></slot>
      <slot name="urlSystemTale"></slot>
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
    </el-table>
    <nav style="text-align: center">
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10]"
          :page-size="pageSize" layout="prev, pager, next, total" :total="total" prev-text="上一页" next-text="下一页">
        </el-pagination>
      </div>
    </nav>
  </div>
</template>

<script>
  export default {
    name: "myTable",
    props: {
      tableItem: {
        type: Array,
        default: () => []
      },
      tableData: {
        type: Array,
        default: () => []
      },
      checkIdList: {
        type: Array,
        default: () => []
      },
      currentPage: {
        type: Number,
        default: () => 1
      },
      pageSize: {
        type: Number,
        default: () => 20
      }, total: {
        type: Number,
        default: 0
      }
    },
    methods: {
      tableRowClassName ({
        row,
        rowIndex
      }) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      //分页展示表格数据
      handleCurrentChange (val) {
        //this.currentPage = val
        let data = {
          page: val,
          rows: this.pageSize
        }
        this.$emit("handleCurrentChange", data)
      },
      //双击行选取数据
      dbSelected (val) {
        this.$emit("dbSelected", val)
      },
      //单机行选取数据
      urlSelect (val) {
        this.$emit("singleSelect", val)
      },
      //改变选中的颜色
      isRed ({ row }) {
        const checkIdList = this.checkIdList.map((item) => item.ID);
        if (checkIdList.includes(row.ID)) {
          return {
            height: '35px',
            color: "rgb(90,156,248)",
          };
        } else {
          return {
            height: '35px',

          };
        }

      }

    },
  }
</script>

<style lang='scss' scoped>

</style>