欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格

 更新時間:2024年05月06日 10:51:35   作者:lijinglianging  
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

html :

 <el-table
 :header-cell-style="{background:'#6d7f93',color:'white'}"
 :data="ptableDate"
 align="center"
 border
 v-loading="loading"
 :height="tableHeight"
 :span-method="objectOneMethod"
 >
 <el-table-column align="center" show-overflow-tooltip prop="projName" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="dirtySection" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="towerNumber" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column>
 </el-table>

method

objectOneMethod({ row, column, rowIndex, columnIndex }) {
 if (columnIndex === 0) {
 const _row = this.setTable(this.ptableDate).one[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
 rowspan: _row,
 colspan: _col
 };
 }
 if (columnIndex === 1 ) {
 const _row = this.setTable(this.ptableDate).two[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
 rowspan: _row,
 colspan: _col
 };
 }
 },
 setTable(tableData) {
 let spanOneArr = [],
 spanTwoArr = [],
 concatOne = 0,
 concatTwo = 0;
 tableData.forEach((item, index) => {
 if (index === 0) {
 spanOneArr.push(1);
 spanTwoArr.push(1);
 } else {
 if (item.projName === tableData[index - 1].projName) {
 //第一列需合并相同內容的判斷條件
 spanOneArr[concatOne] += 1;
 spanOneArr.push(0);
 } else {
 spanOneArr.push(1);
 concatOne = index;
 }
 if (item.dirtySection === tableData[index - 1].dirtySection) {
 //第二列和需合并相同內容的判斷條件
 spanTwoArr[concatTwo] += 1;
 spanTwoArr.push(0);
 } else {
 spanTwoArr.push(1);
 concatTwo = index;
 }
 }
 });
 return {
 one: spanOneArr,
 two: spanTwoArr
 };
 },

ps:下面看下ELEMENT-UI 合并單元格的方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 只合并區(qū)域位置
  //columnIndex 橫的第一列
  //rowIndex 豎的數(shù)組的length % 3 ==0 合并單元格
 if (columnIndex === 0) { //如果是第一行
if (rowIndex % 3 === 0) {//如果是 數(shù)組長度 % 3 ==0
return {
rowspan: 3,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},

總結

到此這篇關于vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格的文章就介紹到這了,更多相關Element-UI中單元格合并內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 前端配合后端實現(xiàn)Vue路由權限的方法實例

    前端配合后端實現(xiàn)Vue路由權限的方法實例

    一開始我還以為vue的路由只能用在工程化的項目里面,其實不然,下面這篇文章主要給大家介紹了關于前端配合后端實現(xiàn)Vue路由權限的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化

    Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化

    這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue動態(tài)組件component標簽的用法大全

    Vue動態(tài)組件component標簽的用法大全

    這篇文章主要介紹了Vue動態(tài)組件component標簽的用法,在Vue中,可以通過component標簽的is屬性動態(tài)指定標簽,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • Vue3子組件實現(xiàn)v-model用法的示例代碼

    Vue3子組件實現(xiàn)v-model用法的示例代碼

    在Vue 3中,實現(xiàn)自定義的input組件并支持v-model綁定,涉及到對modelValue這個默認prop的處理和對應的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實現(xiàn)v-model用法的示例,需要的朋友可以參考下
    2024-04-04
  • vue3安裝配置sass的詳細步驟

    vue3安裝配置sass的詳細步驟

    sass是css的預處理器,擴展了css語言,提供了規(guī)則、變量、混入、選擇器、繼承、內置函數(shù)等特性,有助于減少CSS重復的代碼,節(jié)省開發(fā)時間,下面這篇文章主要給大家介紹了關于vue3安裝配置sass的相關資料,需要的朋友可以參考下
    2022-12-12
  • 詳解vue中使用微信jssdk

    詳解vue中使用微信jssdk

    這篇文章主要介紹了vue中使用微信jssdk,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • ElementUI實現(xiàn)el-table行列合并的操作步驟

    ElementUI實現(xiàn)el-table行列合并的操作步驟

    在前端開發(fā)中,數(shù)據(jù)展示一直是一個重要的部分,而表格則是數(shù)據(jù)展示最常見的形式之一,ElementUI 是餓了么前端團隊推出的一款基于 Vue 的 UI 組件庫,其中的 el-table 組件是一個功能強大且靈活的表格組件,今天我們要詳細探討的是 el-table 的行列合并操作
    2024-08-08
  • vue中引入mxGraph的步驟詳解

    vue中引入mxGraph的步驟詳解

    本文分步驟給大家介紹了vue中引入mxGraph的方法,非常不錯,給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • vue?動態(tài)路由component?傳遞變量報錯問題解決

    vue?動態(tài)路由component?傳遞變量報錯問題解決

    這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • vue cli3.0結合echarts3.0與地圖的使用方法示例

    vue cli3.0結合echarts3.0與地圖的使用方法示例

    這篇文章主要給大家介紹了關于vue cli3.0結合echarts3.0與地圖的使用方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-03-03

最新評論