element-ui的表格行,列合併問題
阿新 • • 發佈:2018-11-26
1.在寫展示表格的時候,需要把5行合併為一列;
以下為element-ui 官網文件:
<div> <el-table :data="tableData6" :span-method="arraySpanMethod" // 把列合併為行 border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="amount1" sortable label="數值 1"> </el-table-column> <el-table-column prop="amount2" sortable label="數值 2"> </el-table-column> <el-table-column prop="amount3" sortable label="數值 3"> </el-table-column> </el-table> <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="amount1" label="數值 1(元)"> </el-table-column> <el-table-column prop="amount2" label="數值 2(元)"> </el-table-column> <el-table-column prop="amount3" label="數值 3(元)"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData6: [{ id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10 }, { id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12 }, { id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9 }, { id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17 }, { id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }] }; }, methods: { arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 把列合併為行 if (rowIndex % 2 === 0) { // 首先篩選行數 0 , 2 ,4 if (columnIndex === 0) { // 當列數為0,開始, return [1, 2]; // 把2列合併為一行 } else if (columnIndex === 1) { return [0, 0]; } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 把行合併為列數 if (columnIndex === 0) { // 第一列 if (rowIndex % 2 === 0) { // 行數為0,2,4 return { rowspan: 2, // 把2行合併為一列 colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } }; </script>
圖片沒有顯示
2.我要實現的頁面;
objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 6) { // 首先第六列 // 把6行合併為一列 if (rowIndex === 0) { // 當第一行開始 // 從0行開始 把6行 合併為1列 return { rowspan: 6, colspan: 1 }; } else if (rowIndex === 6) { // 當第7行就為正常的一行;要返回 把1行合併為一列 return { rowspan: 1, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } else if (rowIndex === 7) { // 把7列合併為一行 if (columnIndex === 0) { return [1, 7]; } } },