【前端】el-table组件结合插槽的表格框架及父组件分页使用_el-table 嵌套分页表格

1、子组件 mTable.vue

用插槽实现表格列样式自定义；如果是最后一列且是每行相同的操作列，还可以简单地用v-if传值判断实现。
表格样式：第一列内容靠左，其余列内容居中；表格body超出滚动

<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      :header-cell-style="tableHeader"
    >
      <el-table-column type="index" label="序号" minWidth="50%" v-if="isOrdered"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableCol"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
      >
        <template slot-scope="scope">
          <!-- 具名插槽 -->
          <slot v-if="item.slot" :name="item.prop" :info="scope.row"></slot>
          <span v-else>{{ getText(scope.row[item.prop]) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="查看" v-if="operation == 'view'" minWidth="60%">
        <template slot-scope="scope">
          <div class="text" @click="viewItem(scope.row)">查看</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableCol: {
      default: () => [],
      type: Array,
    },
    tableData: {
      default: () => [],
      type: Array,
    },
    isOrdered: {
      default: false,
      type: Boolean,
    },
    operation: {
      default: '',
      type: String,
    },
  },
  created() {},
  data() {
    return {};
  },
  methods: {
    getText(val) {
      if (val === null || val === undefined) return '-';
      if (!isNaN(val)) return val;
      return val;
    },
    tableHeader() {
      return {
        'background': 'rgba()',
        'color': '#',
        'font-size': '',
        'text-align': 'center',
      };
    },
    viewItem(row) {
      this.$emit('viewItem', row);
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  color: #ecb020;
}
::v-deep .el-table {
  background-color: transparent;
  overflow-y: auto;
  color: #5c6479;
  th,
  tr,
  td {
    background-color: transparent;
    height: 3.7rem;
    font-size: 1.4rem;
  }
}
::v-deep .el-table tr td {
  text-align: center;
  &:first-child {
    text-align: left;
    // padding-left: 1rem;
  }
}
::v-deep .el-table {
  .el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 30rem; //这行在父组件里自定义
  }
}
::v-deep .el-table .cell {
  line-height: 2.1rem;
}
</style>
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
98
99
100
101
102
103
104
105
106
107
108
109

2、父组件使用

（1）分页

查询获得所有数据后存储到tableData，传给el-table的data是当页数据：

:tableData="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
1

    <div class="cpager glo-row">
      <el-pagination
        @current-change="changePage"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
      />
    </div>
1
2
3
4
5
6
7
8
9

	tableData: [],
    currentPage: 1,
    pageSize: 10,
1
2
3

    changePage(e) {
      this.currentPage = e;
    },
1
2
3

样式：

::v-deep .el-pagination {
  .el-pager li {
    width: 3rem;
    height: 3rem;
    border-radius: 3px;
    //border: ;
    margin-left: 1rem;
    &.active {
      //background: #;
      //color: #;
    }
  }
  .btn-prev,
  .btn-next {
    width: 3rem;
    height: 3rem;
    border-radius: 3px;
    margin-left: 1rem;
    //border: ;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

（2）插槽使用

tableCol：

tableCol: [
  {
    prop: 'name',
    label: '名称',
    minWidth: '70%',
  },
  {
    prop: '',
    label: '',
    minWidth: '40%',
  },
  {
    prop: '',
    label: '',
    minWidth: '40%',
  },
  {
    prop: '',
    label: '',
    minWidth: '40%',
  },
  {
    prop: 'state',
    label: '完成情况',
    minWidth: '60%',
    slot: true,
  },
];
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

需求是完成情况有三种，对应不同颜色。

<slot v-if="item.slot" :name="item.prop" :info="scope.row"></slot>
1

table组件里这一行的含义是：哪一列需要插槽就为哪一列设置 slot: true, 插槽的名字就是prop字段的值，行数据存在info里。
这里完成情况一列需要自定义内容，插槽名为state，用scope.info就可以在父组件里拿到该行对象的数据了，当然，不叫info也行。

        <mTable :tableCol="tableCol" :tableData="tableData">
          <template #state="scope">
            <div
              :class="{
                'green': scope.info.state == 1,
                'red': scope.info.state != 1 && scope.info.state != 2,
                'yellow': scope.info.state == 2,
              }"
            >{{ getText(scope.info.state) }}</div>
          </template>
        </mTable>
1
2
3
4
5
6
7
8
9
10
11

    getText(n) {
      if (n == 1) return '已完成';
      if (n == 2) return '进行中';
      if (n == 3) return '未开始';
      return n;
    },
1
2
3
4
5
6

没有插槽的只需要给table组件传tableCol和tableData就行了。

      <mTable
        :tableCol="tableCol"
        :tableData="tableData"
        operation="view"
        @viewVideo="viewVideo"
      ></mTable>
1
2
3
4
5
6

最后，在样式上，mTable子组件里设置超出滚动

::v-deep .el-table {
  .el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
1
2
3
4
5
6

父组件引入只需要自定义最大高度就行了。

.c-table {
  margin-top: 1rem;
  ::v-deep .el-table {
    .el-table__body-wrapper {
      max-height: 23rem;
    }
  }
}
1
2
3
4
5
6
7
8