基于element表格的封装（较于之前的优化）

最新推荐文章于 2024-03-01 11:21:22 发布

四木Zhang

最新推荐文章于 2024-03-01 11:21:22 发布

阅读量122

点赞数

分类专栏： element 文章标签： javascript 开发语言 vue.js 前端

本文链接：https://blog.csdn.net/weixin_45271300/article/details/130502419

版权

element 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章展示了如何使用ElementUI库在Vue.js中封装一个动态表格组件。该组件支持数据加载、自定义排序、行选择、单元格点击事件以及包含子项的树形结构。用户可以通过传入不同的属性如表格数据、标题、操作按钮等来自定义表格展示。

摘要由CSDN通过智能技术生成

基于element封装的动态表格

<template>
  <!-- 统计组件————动态表格 -->
  <div>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      min-height="260"
      :height="height"
      style="width: 100%; margin-top: 10px"
      row-key="id"
      :header-cell-style="{ background: '#007bfc', color: '#fff' }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :cell-style="cellStyle"
      :border="border"
      stripe
      highlight-current-row
      @selection-change="handleSelectionChange"
      @sort-change="changeSort"
      @cell-click="clickCol"
    >
      <!-- 选中 -->
      <el-table-column v-if="select" type="selection" width="60" align="center">
      </el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="pageNum || pageSize"
        label="序号"
        width="70"
        align="center"
        fixed
      >
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- 动态表格 -->
      <template v-for="v in tableTitle">
        <el-table-column
          v-if="v.dataItem"
          :sortable="custom ? custom : v.custom"
          :prop="v.dataItem"
          :label="v.dataName"
          :key="v.dataItem"
          row-key="sort"
          :min-width="v.width"
          align="center"
          :fixed="v.fixed"
          :show-overflow-tooltip="true"
          :formatter="v.formatter ? v.formatter : null"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          align="center"
          v-else-if="v.slot"
          :key="v.slot"
          :label="v.dataName"
          :width="v.width"
          fixed="right"
        >
          <slot
            :name="v.slot"
            slot-scope="{ row, $index }"
            :row="row"
            :index="$index"
          />
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ComTable",
  props: [
    "tableData",   //表格内容
    "tableTitle",   //表格标题
    "select",       //是否展示选中
    "pageNum", //页数
    "pageSize", //每页条数
    "custom",    //自定义排序
    "cellStyle",  //自定义样式
    "border",    //是否使用border
    "height",   //高度
    "loading",  //等待动画
  ],
  data() {
    return {};
  },

  methods: {
    // 数据点击
    clickCol(row, column) {
      this.$emit("clickCol", row, column);
    },
    //操作方法
    ClickBtn(name, row) {
      this.$emit("ClickBtn", name, row);
    },
    // 选择项发生变化时触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
      this.$emit("selectValue", val);
    },
    // 排序
    changeSort(val) {
      // console.log(val);
      this.$emit("changeSort", val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

在这里插入图片描述
表格内容若含有子项时，则会变成树形结构

使用方式：

在父组件中引用

import componentTable from "@/components/componentTable.vue";

在vue中注册

components: {componentTable},

在中进行使用

<componentTable 
        :pageNum="pageNum"
        :pageSize="pageSize"
        :tableTitle="tableTitle"
        :tableData="tableData"
        :loading="loading"
        height="calc(50vh - 182px)"
      >
      //需要操作按钮时，使用插槽即可
        <template #operat="scope">
          <el-button
            type="primary"
            size="mini"
            @click="viewBtn(scope.row)"
            >查看</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="examineBtn(scope.row)"
            >审批</el-button
          >
        </template>
      </componentTable >

data中

tableData: [],
tableTitle: [
        {
          dataItem: "name",
          dataName: "名称",
          width: 160,
        },
        //不需要操作时，可不用这个
        {
          slot: "operat",
          dataName: "操作",
          width: 160,
        },
      ],