elementui table

ElementUI 的 table 组件是一个基于 Vue.js 的表格组件，它提供了丰富的功能和属性，使得在 Vue.js 项目中使用表格变得非常简单。以下是关于 ElementUI table 的一些常用属性和方法：

1. 常用属性：
- `:data`：用于绑定表格的数据源。
- `:columns`：用于定义表格的列信息。
- `:options`：用于配置表格的选项，如分页、搜索等。

2. 通过 v-for 封装适⽤性更好的表格：
可以使用 v-for 指令来循环渲染表格的列，这样可以更灵活地定义表格的列信息。示例代码如下：

   <el-table :data="tableData">
     <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column>
   </el-table>

3. 插槽域（slot-scope）：
在表格中使用插槽时，可以通过 slot-scope 获取到当前行的数据和其他相关信息。示例代码如下：

   <el-table :data="tableData">
     <el-table-column>
       <template slot-scope="scope">
         {{ scope.row.name }} - {{ scope.row.age }}
       </template>
     </el-table-column>
   </el-table>

4. Vue+ElementUI table 表格分页：
ElementUI 的 table 组件支持前端分页和后端分页两种方式。前端分页是在前端将数据分成多个页面，用户在浏览时只加载当前页面的数据；后端分页是将数据分成多个页面，用户在请求时一次性获取所有页面的数据。两种方式各有优缺点，可以根据实际需求选择合适的分页方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>