㈠ element-ui 如何在Vue渲染Tabel表格内容
在Vue开发中，element-ui以其丰富的组件库和易用性深受前端开发者喜爱，尤其是在构建后台管理系统时，表格和表单的高效呈现显得尤为重要。下面我们将详细探讨如何在element-ui中优雅地渲染表格内容，以便实现动态数据展示和管理。
首先，让我们来看一下如何在<el-table>中嵌入数据。当你将一个包含对象数组的data属性注入到el-table中，只需在el-table-column的prop属性中指定对象键，label属性则定义列名。例如：
这种方式在参数较少的情况下确实方便，但当数据量大或需要动态展示时，就显得有些繁琐。
为了解决这个问题，我们可以利用Vue的动态绑定和循环渲染。table分为thead和tbody两部分，我们可以分别处理。在HTML中，使用v-for指令来循环渲染表头和主体：
JavaScript部分则定义了数据源，包括表头信息和具体数据列表：
这样，无论数据结构如何变化，表格都能根据数据源动态渲染，提高灵活性。
运行上述代码，你将看到一个清晰且动态的表格，包含了编码、姓名、权限描述等列，启用状态用el-switch展示。这样的设计使得数据的增删改查操作更加直观，提升用户体验。
㈡ 饿了么框架的表格自定义
直接展示表格组件代码table.vue。
数据格式tableData包含表格所需信息。
分页代码参考饿了么文档，操作栏由父组件传递isShow控制显示与隐藏。操作栏采用作用域插槽，支持自定义配置。
调用代码：tableData="tableData"传递数据，v-on:del_data="showChild"接收子组件传来的id值。删除按钮触发deleteClick(scope)事件，获取当前行信息，使用axios执行相应操作。
批量操作功能通过具名插槽实现，子组件定义selection-change事件。
父组件接收事件，完成批量功能。
至此，具备复用性的表格组件构建完成。此组件设计思路对初次使用element-ui做表格的前端人员具有指导意义。欢迎指正错误和补充不足之处，共同进步。
㈢ elementui 表格中嵌套子表格
<el-table :data="apply_form_table" border :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:default-expand-all="false" :row-class-name="getRowClass" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-table v-show="scope.row.children.length>0" border
:header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="scope.row.children"
style="width: 100%">
<el-table-column prop="name" label=""></el-table-column>
<el-table-column prop="num" label=""></el-table-column>
<el-table-column prop="unit" label=""></el-table-column>
<el-table-column prop="unit_price" label=""></el-table-column>
<el-table-column prop="total_price" label=""></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="name" label=""></el-table-column>
<el-table-column prop="num" label=""></el-table-column>
<el-table-column prop="unit" label=""></el-table-column>
<el-table-column prop="unit_price" label=""></el-table-column>
<el-table-column prop="total_price" label=""></el-table-column>
</el-table>
apply_form_table: [{
name: '签字笔',
num: '2',
unit: '2',
unit_price: '2',
total_price: '2',
children: []
}, {
name: '签字笔',
num: '2',
unit: '2',
unit_price: '2',
total_price: '2',
children: [{
name: '签字笔',
num: '2',
unit: '2',
unit_price: '2',
total_price: '2',
}, {
name: '签字笔',
num: '2',
unit: '2',
unit_price: '2',
total_price: '2',
}]
}]
methods: {
// 判断表格中的子表格是否有数据，有就显示，无就不显示
getRowClass({
row,
rowIndex
}) {
if (row.children.length == 0) {
return 'row-expand-cover';
} else {
return '';
}