㈠ 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 '';
}