基于Vue与element 封装Table 表格

原创

已于 2023-03-22 15:53:50 修改

· 450 阅读

4 ·

版权

文章标签：

#前端 #vue.js

于 2023-03-22 15:11:15 首次发布

文章介绍了如何在Vue.js中创建一个可复用的Table组件，包括表格的列定义、数据绑定、事件监听以及自定义内容的插槽使用。同时展示了如何通过columns和data属性来动态渲染表格，并提供了具体的代码示例。此外，还提到了如何在外部文件（如tableList.js）中定义列配置，并在main.js中全局注册和使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们在components里面定义一个公共组件，

Table 表格的代码如下

<template>
  <div v-loading="loading">
    <el-table ref="tableData" :stripe="stripe" :max-height="maxHeight" header-row-class-name="table-list-header" row-class-name="table-list-row" :size="tableSize" :data="data" @current-change="handleTableCurrentChange" @row-click="handleTableRowClick" v-bind="otherConfig">
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column v-if="item.selection" type="selection" width="55" :fixed="item.fixed" align="center" header-align="center" :key="`selection_${index}`"></el-table-column>
        <!-- 序号 -->

最低0.47元/天解锁文章