Vue3 + Element 自定义数据表格组件 el-table

已于 2022-10-25 09:11:59 修改
阅读量5k 收藏 5
点赞数
文章标签： ui elementui vue.js
于 2022-01-12 11:23:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x2826436174/article/details/122449189
版权

目录

1.0

创建组件

使用组件

ts

html

效果：

2.0--------优化多个操作项显示，优化删除确认框

优化：

 弊端：

2.1       ----------------支持插槽操作

ts

vue

 模型

1.0

创建组件

<script lang="ts">
export default {
  name: "ReElTable"
};
</script>
<script setup lang="ts">
import { getCurrentInstance, watch } from "vue";
import { useI18n } from "vue-i18n";

const { proxy } = getCurrentInstance();
const { locale } = useI18n();

//监听国际化切换变化 用于国际化响应
watch(
  () => locale.value,
  () => {
    //防止 进行国际化操作时 固定列出现 样式异常问题
    proxy.$nextTick(() => {
      proxy.$refs["filterTableRef"].doLayout();
    });
  }
);

//获取 父级传进的参数
const props = defineProps({
  tableModule: {
    type: Object,
    default: null
  }
});
</script>

<template>
  <div>
    <h1>使用组件</h1>
    <el-table
      ref="filterTableRef"
      class="table-list"
      row-key="date"
      stripe
      :data="props.tableModule.table.data"
      v-loading="props.tableModule.table.loading"
      @sort-change="props.tableModule.table.sortChangeFunc"
      height="650"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <template v-for="(item, index) in props.tableModule.columns" :key="index">
        <el-table-column
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :sortable="item.sortable"
          :label="item.label"
          :align="item.align"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
        </el-table-column>
      </template>
      <template v-if="props.tableModule.operation">
<!--        操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operation')"
          width="200"
        >
          <template #default="scope">
            <template v-for="(item, index) in props.tableModule.operation" :key="index">
              <template v-if="!item.popConfirm">
<!--                普通按钮-->
                <el-button
                  type="text"
                  size="small"
                  @click="item.clickFunc(scope.$index, scope.row)"
                  >{{ item.button }}</el-button
                >
              </template>
              <template v-else>
<!--                带有确认框的按钮-->
                <el-popconfirm
                  :confirm-button-text="
                    !item.popConfirm.confirm
                      ? $t('button.confirm')
                      : item.popConfirm.confirm
                  "
                  :cancel-button-text="
                    !item.popConfirm.cancel
                      ? $t('button.cancel')
                      : item.popConfirm.cancel
                  "
                  :title="
                    !item.popConfirm.title
                      ? $t('else.isDelete')
                      : item.popConfirm.title
                  "
                  @confirm="item.clickFunc(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="text" size="small">
                      {{ item.button }}
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!--分页-->
    <el-pagination
      :hide-on-single-page="false"
      :current-page="props.tableModule.paging.currentPage"
      :page-sizes="[5, 10, 15, 20, 25]"
      :page-size="props.tableModule.paging.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.tableModule.paging.total"
      @size-change="props.tableModule.paging.sizeChangeFunc"
      @current-change="props.tableModule.paging.currentChangeFunc"
      align="right"
    ></el-pagination>
  </div>
</template>

<style scoped></style>

使用组件

ts

//引入组件 我的因为用的比较多所以 在main.js中引入了
import { ReElTable } from "/@/components/csms/re-el-table";

const tableModule = () => {
  return {
    table: {
      data: state.tableData,
      loading: state.tableLoading,
      sortChangeFunc: onSortChange
    },
    columns: [
      { prop: "id", sortable: true, width: 120, label: t("table.id") },
      { prop: "stationName", label: t("table.name") },
      { prop: "state", label: t("table.state") }
    ],
    operation: [
      { button: t("button.details"), clickFunc: onInfo },
      { button: t("button.delete"), popConfirm: true, clickFunc: onDel }
    ],
    paging: {
      currentPage: state.currentPage,
      pageSize: state.pageSize,
      total: state.total,
      sizeChangeFunc: pageSizeChange,
      currentChangeFunc: pageIndexChange
    }
  };
};

html

<ReElTable
   :tableModule="tableModule"
>
</ReElTable>

效果：

这里修改了 删除按钮 只是为了做一个 示例 

2.0--------优化多个操作项显示，优化删除确认框

优化

<script lang="ts">
export default {
  name: "ReElTable"
};
</script>
<script setup lang="ts">
import { getCurrentInstance, watch, reactive } from "vue";
import { useI18n } from "vue-i18n";

const { proxy } = getCurrentInstance();
const { locale } = useI18n();

//监听国际化切换变化 用于国际化响应
watch(
  () => locale.value,
  () => {
    //防止 进行国际化操作时 固定列出现 样式异常问题
    proxy.$nextTick(() => {
      proxy.$refs["filterTableRef"].doLayout();
    });
  }
);

//获取 父级传进的参数
const props = defineProps({
  tableModule: {
    type: Object,
    default: null
  }
});

//监听父级参数变化
watch(
  () => props.tableModule,
  () => {
    handleOperation();
  }
);

const operationArr = reactive([]);
const operationDropdownArr = reactive([]);

//用于对操作项显示处理
function handleOperation() {
  if (!props.tableModule.operation) return;
  operationArr.length = 0;
  operationDropdownArr.length = 0;
  let x = props.tableModule.operation.length > 3 ? 1 : 0;
  props.tableModule.operation.forEach(arr => {
    //判断是否显示
    if (arr.permission != false) {
      if (x < 3) {
        operationArr.push(arr);
      } else {
        operationDropdownArr.push(arr);
      }
      x++;
    }
  });
}

handleOperation();
</script>

<template>
  <div>
    <el-table
      ref="filterTableRef"
      class="table-list"
      size="large"
      :row-key="props.tableModule.table.data?.id"
      stripe
      :data="props.tableModule.table.data"
      v-loading="props.tableModule.table.loading"
      @sort-change="props.tableModule.table.sortChangeFunc"
      :max-height="
        props.tableModule.table.height ? props.tableModule.table.height : 650
      "
      :header-cell-style="{ background: '#f5f7fa' }"
      @selection-change="props.tableModule.table.selectionChange"
    >
      <template v-if="props.tableModule.table.selectionChange">
        <el-table-column type="selection" width="55" />
      </template>
      <slot />
      <template v-for="(item, index) in props.tableModule.columns" :key="index">
        <el-table-column
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :sortable="item.sortable"
          :label="item.label"
          :align="item.align"
          :formatter="item.formatter"
          :show-overflow-tooltip="true"
        />
      </template>
      <template v-if="operationArr.length > 0">
        <!--        操作列-->
        <el-table-column
          align="center"
          :fixed="props.tableModule.operationAttr?.fixed ?? 'right'"
          :label="$t('title.operations')"
          :width="props.tableModule.operationAttr?.width ?? 200"
        >
          <template #default="scope">
            <template v-for="(item, index) in operationArr" :key="index">
              <!--                普通按钮-->
              <el-button
                type="primary"
                link
                size="small"
                @click="item.clickFunc(scope.$index, scope.row)"
                >{{ item.button }}</el-button
              >
            </template>
            &nbsp;
            <el-dropdown
              :hide-on-click="false"
              v-if="operationDropdownArr.length > 0"
            >
              <el-button type="primary" size="small" link>
                {{ $t("title.more") }}
                <el-icon class="el-icon--right">
                  <IconifyIconOffline icon="arrow-down" />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <template
                    v-for="(item, index) in operationDropdownArr"
                    :key="index"
                  >
                    <el-dropdown-item
                      :command="item.button"
                      @click="item.clickFunc(scope.$index, scope.row)"
                    >
                      {{ item.button }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!--分页-->
    <template v-if="props.tableModule.paging">
      <el-pagination
        :hide-on-single-page="false"
        :current-page="props.tableModule.paging.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="props.tableModule.paging.pageSize"
        layout="->, total, sizes, prev,  pager, next, jumper"
        :total="props.tableModule.paging.total"
        @size-change="props.tableModule.paging.sizeChangeFunc"
        @current-change="props.tableModule.paging.currentChangeFunc"
      />
    </template>
  </div>
</template>

<style lang="scss" scoped>
//.el-button + .el-button {
//  margin-left: 0 !important;
//}
</style>

优化：

1.不再使用弹出在按钮旁的询问框（没做防抖的话，快速点击会出现重复发送请求问题）

2.低于或包含三个操作项直接显示，超出则提供一个更多按钮，点击后显示其他操作项

 弊端：

  使用插槽不方便

2.1       ----------------支持插槽操作

支持插槽

ts

<script lang="ts">
export default {
  name: "ReElTable"
};
</script>
<script setup lang="ts">
import { getCurrentInstance, watch, reactive } from "vue";
import { useI18n } from "vue-i18n";

const { proxy } = getCurrentInstance();
const { locale } = useI18n();

//监听国际化切换变化 用于国际化响应
watch(
  () => locale.value,
  () => {
    //防止 进行国际化操作时 固定列出现 样式异常问题
    proxy.$nextTick(() => {
      proxy.$refs["filterTableRef"].doLayout();
    });
  }
);

//获取 父级传进的参数
const props = defineProps({
  tableModule: {
    type: Object,
    default: null
  }
});

//监听父级参数变化
watch(
  () => props.tableModule,
  () => {
    handleOperation();
  }
);

const operationArr = reactive([]);
const operationDropdownArr = reactive([]);

//用于对操作项显示处理
function handleOperation() {
  if (!props.tableModule.operation) return;
  operationArr.length = 0;
  operationDropdownArr.length = 0;
  let x = props.tableModule.operation.length > 3 ? 1 : 0;
  props.tableModule.operation.forEach(arr => {
    //判断是否显示
    if (arr.permission != false) {
      if (x < 3) {
        operationArr.push(arr);
      } else {
        operationDropdownArr.push(arr);
      }
      x++;
    }
  });
}

handleOperation();
</script>

<template>
  <div>
    <el-table
      ref="filterTableRef"
      class="table-list"
      size="large"
      :row-key="props.tableModule.table.data?.id"
      stripe
      :data="props.tableModule.table.data"
      v-loading="props.tableModule.table.loading"
      @sort-change="props.tableModule.table.sortChangeFunc"
      :max-height="
        props.tableModule.table.height ? props.tableModule.table.height : 650
      "
      :header-cell-style="{ background: '#f5f7fa' }"
      @selection-change="props.tableModule.table.selectionChange"
    >
      <!--多选框-->
      <template v-if="props.tableModule.table.selectionChange">
        <el-table-column type="selection" width="55" />
      </template>
      <template v-for="(item, index) in props.tableModule.columns" :key="index">
        <!--是否为插槽-->
        <template v-if="item.slotName">
          <slot :name="item.slotName" />
        </template>
        <template v-else>
          <!--列-->
          <el-table-column
            :prop="item.prop"
            :width="item.width"
            :min-width="item.minWidth"
            :fixed="item.fixed"
            :sortable="item.sortable"
            :label="item.label"
            :align="item.align"
            :formatter="item.formatter"
            :show-overflow-tooltip="true"
          />
        </template>
      </template>
      <template v-if="operationArr.length > 0">
        <!--操作列-->
        <el-table-column
          align="center"
          :fixed="props.tableModule.operationAttr?.fixed ?? 'right'"
          :label="$t('title.operations')"
          :width="props.tableModule.operationAttr?.width ?? 200"
        >
          <template #default="scope">
            <template v-for="(item, index) in operationArr" :key="index">
              <!--普通按钮-->
              <el-button
                type="primary"
                link
                size="small"
                @click="item.clickFunc(scope.$index, scope.row)"
                >{{ item.button }}</el-button
              >
            </template>
            &nbsp;
            <!--超出显示更多按钮-->
            <el-dropdown
              :hide-on-click="false"
              v-if="operationDropdownArr.length > 0"
            >
              <el-button type="primary" size="small" link>
                {{ $t("title.more") }}
                <el-icon class="el-icon--right">
                  <IconifyIconOffline icon="arrow-down" />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <template
                    v-for="(item, index) in operationDropdownArr"
                    :key="index"
                  >
                    <el-dropdown-item
                      :command="item.button"
                      @click="item.clickFunc(scope.$index, scope.row)"
                    >
                      {{ item.button }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!--分页-->
    <template v-if="props.tableModule.table.data">
      <el-pagination
        :hide-on-single-page="false"
        :current-page="props.tableModule.paging.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="props.tableModule.paging.pageSize"
        layout="->, total, sizes, prev,  pager, next, jumper"
        :total="props.tableModule.paging.total"
        @size-change="props.tableModule.paging.sizeChangeFunc"
        @current-change="props.tableModule.paging.currentChangeFunc"
      />
    </template>
  </div>
</template>

<style lang="scss" scoped>
//.el-button + .el-button {
//  margin-left: 0 !important;
//}
</style>

vue

 模型

勤劳di码农
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue3】el-table 组件二次封装，看这一篇就够了
m0_68271787的博客
02-28 3304
然而，数据的 key 作为列名的情况很少（至少在我们这里，一般是使用中文作为列名的），这就需要我们使用可定制的列名，并且，如果我们不想展示某些字段，上面的写法也是做不到的（它会显示数据的所有字段）。这时候，我们只需要一个映射（mapper）就可以解决这些问题。该对象的每一个属性对应每一列的 prop、key，值对应列的列名 label。javascript。
vue3企业级项目二次封装el-table、分页
06-28
介绍： 1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用<script setup>语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注！在书写的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：生命周期、上下文、api使用、资源处理等内容实现。 适合人群： 1、具备一定编程基础，工作1-3年的研发人员 能学到什么： 封装技巧、api使用、 阅读建议： 此资源以开发简化版element-plus学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
Vue3:封装Table 表格组件
最新发布
qq_45061461的博客
05-20 726
组件官网 elementPlus : 点击跳转创建新的组件文件: Table.vue 2.接收父组件传递过来的数据 3.父组件代码 效果：
vue3 二次封装element-plus 表格组件
m0_67401746的博客
03-06 1677
由于项目中会频繁的使用表格，会出现非常多的重复代码，所以决定对element-plus的table组件进行封装，尽量避免代码冗余。代码如下： 1.在components文件下新建Table/index.vue文件 <template> <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" fit border highlight-current-row :max-heigh
vue3 实现关于 el-table 表格组件的封装以及调用
weixin_50450473的博客
01-05 2507
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（4）添加排序（升序、降序）
Vue3实现大屏el-table表格隔行变色、表格无任何边框、鼠标悬浮变色
weixin_48240707的博客
05-18 3543
vue3结合element plus 实现大屏表格效果为无任何边框且隔行变色
vue3+element-plus的el-table的一些操作【个人学习使用】
weixin_42342371的博客
12-09 2148
在vue3中，不在使用slot-scope的方式进行插槽的使用使用方式为 #titile = 'scope'进行使用正在上传…重新上传取消。
vue3 中通过$refs 获取子组件数据
weixin_52688746的博客
06-25 3956
vue2 中获取子组件中的数据方法，可以使用 $refs ，但此方式在vue3中不适用了。 问题： 点击删除行的同时修改表格中数据选中状态，需要通过 refs 操作表格中的数据。 具体代码如下：
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法 以下是对 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法的详细解释： 1. 安装相关依赖 在使用 Vue2.0 + Element UI 中 el-table 数据导出 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3中使用el-table表格时，
weixin_55325334的博客
07-05 382
handleSelectionChange事件监听多选项的改变，可以在该事件函数中，改变/更新/保存 选中项的数据。可以动态设置要选中哪些。【我一开始没反应过来，就使用了自定义封装的el-checkbox】1. element plus组件库的el-table，有多选框。通过toggleSelection事件设置触发多选的事件；
vue3后台管理系统封装的普通表格组件
qq_46617584的博客
07-19 937
ComtableListR.vue组件。1.普通的表格组件效果。
Vue开发学习笔记:Vue3中使用标签的ref属性设置el-table点击单元格自动获取焦点
JustWantToFly的博客
05-09 4821
el-table使用ref标签属性设置单元格点击自动获取焦点
Vue3表格（Table）
Mr Dear的博客
04-17 7808
展示行列表格数据。
Vue3 + Element Plus 封装公共表格组件（带源码）
Yana's Blog
05-06 8391
由于项目中有很多菜单都是列表数据的展示，为避免太多重复代码，故将 Element Plus 的 Table 表格进行封装，实现通过配置展示列表数据el-table-column 使用自定义表头支持插槽labelStyle 支持样式自定义支持 tooltipel-table-column 使用自定义单元格支持插槽style 属性支持自定义样式formatter 方法支持自定义显示内容
el-table封装（vue2和vue3）
weixin_46899191的博客
06-08 2414
【代码】el-table封装（vue2和vue3）
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。 实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值