element-ui表格合并span-method的實現(xiàn)方法
先看一下合并后的樣式,表格第二行,二三四列合并
官網(wǎng)給我們提供了span-method的方法可以進行表格合并,有4個參數(shù)返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是當(dāng)前行和列的值,也就是tableData里的值,rowIndex,columnIndex是當(dāng)前行和列的序號
<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="數(shù)值 1"> </el-table-column> <el-table-column prop="amount2" sortable label="數(shù)值 2"> </el-table-column> <el-table-column prop="amount3" sortable label="數(shù)值 3"> </el-table-column> <el-table-column prop="amount4" sortable label="數(shù)值 4"> </el-table-column> </el-table>
<script> export default { data() { return { tableData6: [{ id: '12987122', name: '王小虎', amount1: '11', amount2: '3.2', amount3: 10, amount4: 88 }, { id: '12987123', name: '王小虎', amount1: '11', amount2: '3.2', amount3: 12, amount4: 88 }, { id: '12987124', name: '王小虎', amount1: '11', amount2: '3.2', amount3: 12, amount4: 88 }, { id: '12987125', name: '王小虎', amount1: '11', amount2: '3.2', amount3: 12, amount4: 88 }, { id: '12987126', name: '王小虎', amount1: '539', amount2: '3.2', amount3: 12, amount4: 88 }] }; }, methods: { /** * 表格合并 * @param {*} param0 * row 表格每一行的數(shù)據(jù) * column 表格每一列的數(shù)據(jù) * rowIndex 表格的行索引,不包括表頭,從0開始 * columnIndex 表格的列索引,從0開始 */ arraySpanMethod ({ row, column, rowIndex, columnIndex }) { // console.log(row, column, rowIndex, columnIndex) // 打印出的數(shù)據(jù)就是表格當(dāng)前行的數(shù)據(jù),當(dāng)前列的數(shù)據(jù),索引 if (rowIndex === 1) { // 合并第二行 if (columnIndex === 1) { // 從第二列開始 return [1, 3] // 這里返回的是行和列的合并數(shù)量,可以返回一個數(shù)組,也可以返回一個對象,效果一樣 // 這里rowspan為1是行有一行合并,colspan為3是列有3列合并,你要合并幾行幾列就寫上相應(yīng)的數(shù)字 // return { // rowspan: 1, // colspan: 3 // } // 這里要寫一個else的判斷,不然被合并列的原始數(shù)據(jù)會填充到合并之后的表格里 // 這個判斷是把合并的第3列,第4列的值省略,在合并的表格右邊直接填原先第5列的值,合并了幾列,就省略幾列的值 } else if (columnIndex === 2 || columnIndex === 3) { return [0, 0] } } } </script>
再演示一下其他合并效果,第二行和第三行都有合并
arraySpanMethod ({ row, column, rowIndex, columnIndex }) { // console.log(row, column, rowIndex, columnIndex) // 打印出的數(shù)據(jù)就是表格當(dāng)前行的數(shù)據(jù),當(dāng)前列的數(shù)據(jù),索引 if (rowIndex === 1 || rowIndex === 2) { // 在這里多加一個行的判斷就行 // 合并第二行 if (columnIndex === 1) { // 從第二列開始 return [1, 3] // 這里返回的是行和列的合并數(shù)量,可以返回一個數(shù)組,也可以返回一個對象,效果一樣 // 這里rowspan為1是行有一行合并,colspan為3是列有3列合并,你要合并幾行幾列就寫上相應(yīng)的數(shù)字 // return { // rowspan: 1, // colspan: 3 // } // 這里要寫一個else的判斷,不然被合并列的原始數(shù)據(jù)會填充到合并之后的表格里 // 這個判斷是把合并的第3列,第4列的值省略,在合并的表格右邊直接填原先第5列的值,合并了幾列,就省略幾列的值 } else if (columnIndex === 2 || columnIndex === 3) { return [0, 0] } } }
合并多行的情況
arraySpanMethod ({ row, column, rowIndex, columnIndex }) { if (rowIndex === 1) { // 合并第二行 if (columnIndex === 1) { // 從第二列開始 return [2, 3] // 這里返回的是行和列的合并數(shù)量,可以返回一個數(shù)組,也可以返回一個對象,效果一樣 // 這里rowspan為2是行有兩行合并,colspan為3是列有3列合并,你要合并幾行幾列就寫上相應(yīng)的數(shù)字 // 這個判斷是把第一行的第3列,第4列的值省略,在合并的表格右邊直接填原先第5列的值,合并了幾列,就省略幾列的值 } else if (columnIndex === 2 || columnIndex === 3) { return [0, 0] } } else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) { // 第二行的第2個數(shù),第3個數(shù),第4個數(shù)都要省略 return [0, 0] } }
PS: 這里寫的方法是基于數(shù)據(jù)確定的情況,如果數(shù)據(jù)是由后臺返回的情況,可以看一下我整理的另一篇關(guān)于表格合并方法的補充,http://www.dbjr.com.cn/article/161677.htm
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue中img動態(tài)拼接src圖片地址的問題
這篇文章主要介紹了關(guān)于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10Vue.js中class與style的增強綁定實現(xiàn)方法
由于Class和Style綁定使用頻繁,字符串拼接麻煩且易錯,因此,Vue.js 做了專門的增強,表達式結(jié)果的類型除了字符串之外,還可以是對象或數(shù)組,本文給大家講解Vue.js中class與style的增強綁定知識,感興趣的朋友一起看看吧2023-04-04vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個頁面跳轉(zhuǎn)到另一個頁面并攜帶參數(shù)的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06