vue中使用ele组件table实现动态列

已于 2024-03-28 13:41:20 修改
阅读量1.5k 收藏 13
点赞数 4
文章标签： vue.js elementui javascript
于 2024-03-14 14:49:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wch19960518/article/details/136702947
版权

本文主要是基于element中table拼接动态列并对动态列合计、行合并、加合计行、对table默认样式的修改、table中局部loading效果的实现。

实现效果图：
在这里插入图片描述

目录

数据结构

[
	{
            "id": "1",
            "projectBudgetId": "1",
            "subjectName": "测试名",
            "itemName": "测试名",
            "remark": null,
            "startTime": 2024,
            "endTime": 2026,
            "totalAmount": "2200.0000",
            "proPlanAndItemQuarters": [
                {
                    "capitalOutflowPlanId": null,
                    "year": "2024",
                    "quarter": null,
                    "quarterAmount": null,
                    "totalAmountForYear": "2200"
                },
                {
                    "capitalOutflowPlanId": null,
                    "year": "2024",
                    "quarter": "Q1",
                    "quarterAmount": "1200",
                    "totalAmountForYear": null
                },
            ]
        }
]

动态列主要是拼接proPlanAndItemQuarters中的字段

详细代码

下面为详细代码：

  1. template中
   <div class="table-con">
        <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            show-summary
            :summary-method="getSummaries" 
            border
            style="width: 100%; height: 100%;"
            v-loading="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          >
          <el-table-column prop="subjectName" label="科目" align="center" fixed />
          <el-table-column prop="itemName" label="成本项" align="center" fixed/>
          <el-table-column prop="totalAmount" label="合计" align="center" fixed/>
          <el-table-column
            v-for="(items, index) in tableCols"
            :key="index + items"
            :label="curLable(items)"
            align="center" >
            <template v-slot="scope">   
            {{ handleReplaceNum(scope.row.proPlanAndItemQuarters[index].quarterAmount, '-') }} 
            </template>  
          </el-table-column>
          </el-table>
      </div>
  1. css
.table-con {  
  height: calc(100% - 21px);
}
 
:deep(.el-table) {
  --el-table-border-color: transparent;
}

:deep(.el-scrollbar__wrap),
:deep(.el-table th), 
:deep(.el-table tr),
:deep(.el-table td),
:deep(.el-table tfoot td.el-table__cell) {
  background-color: #0A3C9C !important;
  border-color: #04113E;
  color: #FFFFFF;
  font-size: 24px;
}

:deep(.el-table th) {
  background-color: #1B66E9 !important;
}

:deep(.el-table th.el-table__cell.is-leaf) {
  border-color: #04113E !important;
}
 
/* 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}
 
/* 设置表格行高度 */
:deep(.el-table__body tr),
:deep(.el-table__body td) {
  padding: 0;
  height: 54px;
}
 
/* 修改高亮当前行颜色 */
:deep(.el-table tbody tr:hover>td) {
  background: #063570 !important;
}
 
/* 取消当前行高亮 */
:deep(.el-table tbody tr) {
  pointer-events: none;
}
 
/* 表格斑马自定义颜色 */
:deep(.el-table__row.warning-row) {
  background: #04113E;
}
 
:deep(.el-table .cell),
.el-table th div {
  font-size: 14px;
}

:deep(.el-table--border .el-table__inner-wrapper) {
  height: 100%;
}

:deep(.el-table tfoot td.el-table__cell) {
  border-top: 1px solid #04113E;
}

:deep(.el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell) {
  border-right: 1px solid #04113E; 
}
  1. script
<script setup>
import EmptyEle from '@/components/EmptyEle/index'; 
import titleCon from "../components/titleCon"
import { planItem } from "@/api/largeScreenProject/projectKanban"
import { changeQuarter, handleReplaceNum } from '../utils/index'

let props = defineProps({
  projectId: {
    type: String,
    required: true
  },
})

let tableData = ref([]); // 表格数据
let tableCols = ref([]); //动态列
let spanArr = ref([]);
let pos = ref(0);
let loading = ref(false);
let totalArr = ref([0, 0, 0]); //合计行数据初始化

watch(() => props.projectId, (newValue, oldValue) => {
  handlePlanItem();
})

// 获取列表数据  
const handlePlanItem = () => { 
  tableData.value = [];
  tableCols.value = []; 
  totalArr = ref([0, 0, 0]);
  loading.value = true;  
  planItem(props.projectId).then(res => {   
    if(res?.code === 200) {  
      tableData.value = res?.data;  
      tableCols.value = tableData.value?.[0]?.proPlanAndItemQuarters || [];
      handleResData();    
      calcQuarterTotal();  
    }  
  }).catch(error => {  
    console.error('获取计划项数据发生错误', error);  
  }).finally(() => {  
    loading.value = false;  
  });  
}  
  
// 对后台返回数据的处理，用于合并行  
const handleResData = () => {  
  spanArr.value = []; 
  pos.value = 0;  
  for (var i = 0; i < tableData.value.length; i++) {  
    if (i === 0) {  
      spanArr.value.push(1);  
    } else {  
      // 判断当前元素与上一个元素subjectName是否相同  
      if (tableData.value[i].subjectName === tableData.value[i - 1].subjectName) {  
        spanArr.value[pos.value] += 1;  
        spanArr.value.push(0);  
      } else {  
        spanArr.value.push(1);  
        pos.value = i;  
      }  
    }  
  }   
}  
  
// 合并行的计算规则(当前行row、当前列column、当前行号rowIndex、当前列号columnIndex)  
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {  
  if (columnIndex === 0) {  
    const _row = spanArr.value[rowIndex];  
    return {  
      rowspan: _row,  
      colspan: 1  
    };  
  }  
  return {  
    rowspan: 1,  
    colspan: 1  
  };  
}

// 季度求和
const calcQuarterTotal = () => {
  const quarterSums = {};   
  tableData.value.forEach(item => {  
      item.proPlanAndItemQuarters.forEach(quarter => {  
          const key = quarter.year + '-' + quarter.quarter;  
          quarterSums[key] = (quarterSums[key] || 0) + Number(quarter.quarterAmount);  
      });  
  });  
    
  for (const key in quarterSums) {  
      totalArr.value.push(`${quarterSums[key].toFixed(2)}`);
  }
}

const getSummaries = (param) => {  
  const { columns, data } = param;  
  const summaries = {};  
  columns.forEach((column, index) => {  
    if (index === 0) {  
      summaries[index] = '合计';  
    } else if (index === 2) {    
      const values = data.map((item) => Number(item[column.property]));  
      const sum = values.reduce((prev, curr) => { 
        const value = Number(curr);  
        return Number.isNaN(value) ? Number(prev) : Number(prev) + value;  
      }, 0);  
      summaries[index] = sum.toFixed(2);  
    } else if (index >= 3) {
      summaries[index] = handleReplaceNum(totalArr.value[index], '-');
    }  
  });  
  return summaries;  
};

// 动态列label
const curLable = (items) => {
  return items.quarter != -1 ? items.year +'年度第'+ changeQuarter(items.quarter) + '季度' : items.year +'年度';
}


onMounted(() => {
  handlePlanItem();
})
</script>

具体代码块-动态列实现

<el-table>
	<!-- 这块可写其它固定的列展示 -->
	
	<el-table-column
            v-for="(items, index) in tableCols"
            :key="index + items"
            :label="curLable(items)"
            align="center" >
            <template v-slot="scope">   
            {{ handleReplaceNum(scope.row.proPlanAndItemQuarters[index].quarterAmount, '-') }} 
            </template>  
          </el-table-column>
</el-table>

对上面代码的简单说明：
1， 我这块tableCols取的后端返回数据取的第一条数据中的proPlanAndItemQuarters字段，因为动态拼接的列头都一样，所以随便遍历一条即可。【列头label显示需要前端自行转换拼接为：X年度第X季度。若quarter为-1，则标识只有年度】
2. 插槽进行具体数据显示，这里注意与vue2插槽用法的区别，这里只能用v-slot
3. handleReplaceNum这个封装的方法主要是将为0的数据或者没有的数据替换为 - 显示（可不要）

具体代码块-行合并

:span-method="objectSpanMethod"

// 在获取到数据后对数据进行合并
const handleResData = () => {  
  spanArr.value = []; // 用于存储跨越行数
  pos.value = 0;  // 该变量用于跟踪 spanArr数组中最后一个非零元素的位置
  for (var i = 0; i < tableData.value.length; i++) {  
    if (i === 0) {  
     // 数组中的第一个元素, 添加到 spanArr数组中。这是因为第一个单元格不需要合并，所以它的跨越行数为 1 
      spanArr.value.push(1);
    } else {  
      // 数组中的其他数据，代码检查当前元素的 subjectName 属性是否与前一个元素的 subjectName 属性相同
      if (tableData.value[i].subjectName === tableData.value[i - 1].subjectName) {  
       // 相同则意味着当前单元格需要与上一个单元格合并，将 spanArr数组中对应位置的值加 1。然后在 spanArr数组末尾添加一个 0，表示接下来的单元格不需要跨越任何行
        spanArr.value[pos.value] += 1;  
        spanArr.value.push(0);  
      } else {
      // 如果不同，则在 spanArr数组末尾添加一个 1，表示当前单元格不需要跨越任何行，并更新 pos为当前索引 i，以便在下次迭代时能够正确更新跨越行数  
        spanArr.value.push(1);  
        pos.value = i;  
      }  
    }  
  }   
}  


const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {  
  if (columnIndex === 0) { // 对第一列数据进行处理  
    const _row = spanArr.value[rowIndex];  // 从 spanArr数组中获取与当前行索引对应的值，并将其存储在 _row 变量中，列不需要合并，因此值均为1
    return {  
      rowspan: _row,  
      colspan: 1  
    };  
  }  
  return {  
    rowspan: 1,  
    colspan: 1  
  };  
}

若想合并多列，这里举个栗子 合workName 和 firstLevelNodeName两列

const handleResData = () => {  
  spanArr.value = []; 
  pos.value = 0;  
  for (var i = 0; i < dataSource.value.length; i++) {  
    if (i === 0) {  
      spanArr.value.push(1);  
    } else {   
      if (dataSource.value[i].workName === dataSource.value[i - 1].workName ||
          dataSource.value[i].firstLevelNodeName === dataSource.value[i - 1].firstLevelNodeName) {  
        spanArr.value[pos.value] += 1;  
        spanArr.value.push(0);  
      } else {  
        spanArr.value.push(1);  
        pos.value = i;  
      }  
    }  
  }  
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {  
   // 对这两列数据进行合并
  if (['workName', 'firstLevelNodeName'].includes(column.property)) {
    const _row = spanArr.value[rowIndex];
    return {
      rowspan: _row,
      colspan: 1
    };
  }  
  return {
    rowspan: 1,
    colspan: 1
  };
}

具体代码块-列合计

// 首先table先开启这两属性
show-summary
:summary-method="getSummaries" 

let totalArr = ref([0, 0, 0]); //合计行数据初始化（这块初始化主要是为下面取数据方便，因为我前三列不需要取这块计算到的值，到时候直接使用对应的index取对应列和即可

// 季度求和--获取到table数据后就可执行
const calcQuarterTotal = () => {
  const quarterSums = {};   
  tableData.value.forEach(item => {  
      item.proPlanAndItemQuarters.forEach(quarter => {  
          const key = quarter.year + '-' + quarter.quarter;  // 将年度和季度拼接 作为key值
          quarterSums[key] = (quarterSums[key] || 0) + Number(quarter.quarterAmount);  //对当前这个季度数据求和
      });  
  });  
    
  for (const key in quarterSums) {  
      totalArr.value.push(`${quarterSums[key].toFixed(2)}`); //将求和的数据push到一个数组中
  }
}

// 合计行中数据-第0列显示“合并”， 第1列都是文字不需要，第2列对后端返回的数据求和，从第3列开始就取我们计算好的值
const getSummaries = (param) => {  
  const { columns, data } = param;  
  const summaries = {};  //储存最终的合计数据
  columns.forEach((column, index) => {  
    if (index === 0) {  
      summaries[index] = '合计';  
    } else if (index === 2) {    
      const values = data.map((item) => Number(item[column.property]));  
      const sum = values.reduce((prev, curr) => { 
        const value = Number(curr);  
        return Number.isNaN(value) ? Number(prev) : Number(prev) + value;  
      }, 0);  
      summaries[index] = sum.toFixed(2);  
    } else if (index >= 3) {
      summaries[index] = handleReplaceNum(totalArr.value[index], '-');
    }  
  });  
  return summaries;  
};

具体代码块-修改el-table默认样式

:deep(.el-table) {
  --el-table-border-color: transparent;
}

:deep(.el-scrollbar__wrap),
:deep(.el-table th), 
:deep(.el-table tr),
:deep(.el-table td),
:deep(.el-table tfoot td.el-table__cell) {
  background-color: #0A3C9C !important;
  border-color: #04113E;
  color: #FFFFFF;
  font-size: 24px;
}

:deep(.el-table th) {
  background-color: #1B66E9 !important;
}

:deep(.el-table th.el-table__cell.is-leaf) {
  border-color: #04113E !important;
}
 
/* 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}
 
/* 设置表格行高度 */
:deep(.el-table__body tr),
:deep(.el-table__body td) {
  padding: 0;
  height: 54px;
}
 
/* 修改高亮当前行颜色 */
:deep(.el-table tbody tr:hover>td) {
  background: #063570 !important;
}
 
/* 取消当前行高亮 */
:deep(.el-table tbody tr) {
  pointer-events: none;
}
 
/* 表格斑马自定义颜色 */
:deep(.el-table__row.warning-row) {
  background: #04113E;
}
 
:deep(.el-table .cell),
.el-table th div {
  font-size: 14px;
}

:deep(.el-table--border .el-table__inner-wrapper) {
  height: 100%;
}

:deep(.el-table tfoot td.el-table__cell) {
  border-top: 1px solid #04113E;
}

:deep(.el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell) {
  border-right: 1px solid #04113E; 
}

table中局部loading效果

v-loading="loading"
element-loading-text="拼命加载中..."
element-loading-spinner="el-icon-loading"
  1. 下面定义变量loading
  2. 在发请求时可开启loading效果

表格高度根据页面自适应

表格高设置100% 即可，若设置不正确则排查它的父以及再往上是不是都100%布的

人间废料记
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element动态展示列
Judith_p的博客
04-12 222
后端接口返回为user数组 每个列为一个“”
经典之Vue 3实现动态数据表格
最新发布
赫客的博客
07-06 1421
在上述脚本中，columns数组定义了表格的列头和数据索引。每个对象包含title和dataIndex属性，分别表示列头显示的文字和从数据源中对应的键。
vue 3.0 详情table 支持动态列
weixin_44185995的博客
12-19 536
【代码】vue 3.0 详情table 支持动态列。
vue+el-table实现动态列
weixin_59411270的博客
05-26 1628
前一阵公司内有个需求，需要将后端返回的对象数据渲染在el-table中，将对象中所有的属性名作为列名动态渲染。并且每一列中都要对应相应的项目编码进行渲染。注：本篇文章仅为记录初学者解决问题的小记录。各位大佬勿喷，如果代码中有可以优化的地方，请各位大佬帮忙指出。可能在各位大佬眼中这个需求很简单，但是对于刚入行的我来说一切都需要学习，哈哈哈，在这里记录一下解决方案。下面是完整的vue.js代码。
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui ) TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
热门推荐
wocwin的博客
12-06 1万+
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )TTable组件新增isShowHidden属性（开启列设置时动态默认显示隐藏列）
vue-table 动态 el-table动态生成列（列数不固定）
jonathan_joestar的博客
11-04 3789
vue-table 动态 el-table动态生成列（列数不固定）
el-table 表格动态列展示
weixin_45652891的博客
12-01 1312
效果图。
elementui加vue.js 生成可输入表格可动态增加列
05-11
elementui加vue.js 生成可输入表格可动态增加列并且可编辑table
Vue Table表格动态列 Table表格动态生成列
瘾丶病的博客
11-09 5314
vue Table表格动态设置列 Table表格动态生成列。
el-table动态生成列
T70H78的博客
11-15 7250
需求：在统计的表格中展示不同事项和数据，因为事项的名称和数量都不确定，所以需要动态渲染表头和列 效果： 这是后端返回的数据格式，leave是动态的，key的内容就是表头,使用Object.keys()返回一个数组,数组中就是key值列表，再v-for循环渲染 getRecord(params).then(res => { this.recordList = res.data.data || []; //获取到整个统计列表，用for of将每一条的leave 中的k
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :row-style="setRowStyle" :cell-style="setColumnStyle" :h
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
以下是使用`sortablejs`在Vue中实现`el-table`拖拽排序的详细步骤： 首先，确保已经安装了`sortablejs`库。可以通过npm来安装： ```bash npm install sortablejs --save ``` 接下来，在Vue组件中引入`sortablejs`...
使用vue-admin加eleUI开发的前后端分离后台论坛模板
02-24
【标题】"使用vue-admin加eleUI开发的前后端分离后台论坛模板"涉及的主要知识点有Vue.js、Element UI以及Go语言后端开发。Vue.js是一个轻量级的前端JavaScript框架，以其易用性、高性能和组件化的特点在前端开发领域...
vue3+ElementUI 图片素材管理组件
10-21
ElementUI在Vue3中的使用需要安装`@vue/compat`，这提供了一个兼容层，使得ElementUI的大部分组件可以在Vue3中正常运行。不过，对于新的Vue3特性，ElementUI可能无法完全支持，因此在实际开发中，可能需要结合Vue3的...
vue中用table_vue的table组件
weixin_39719749的博客
12-21 1600
一个vue-table的组件说明：1.基于element-ui开发的vue表格组件。功能:1.支持树形数据的展示2.行拖拽排序3.单元格拖拽排序使用方法：1.下载npm包:你的VUE项目的根目录底下运行：npm install ele-table2.引入本npm包并注册为vue的组件：例如：在需要使用的vue页面中：-+{{scope.row.id}}prop="label"label="地址"&...
Vue动态设置控制表格列表展现列
qq_37635012的博客
03-22 400
最近遇到一个需求，表格列表默认不展示某一列，当我设置后可以展示该列，也可以展示和隐藏别的列，起到可以对整个表格列展示隐藏控制的效果，如下示例，默认不展示“单位名称”这一列，在我点击设置齿轮后可以看到，有“单位名称”这一列，但未打钩： 当我勾中“单位名称”，去掉“地址”的勾中后，列表可以看到“单位名称”这一列，看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是：列表展示列我们用到了tableHead,然后我们定义了一个数组showLis
el-table表格动态渲染行和列
@LiuStrong
03-14 1588
el-table根据返回的数据动态渲染行和列
el-teable表格动态列数渲染及详解
我是段段的博客
08-11 9964
在项目中编写数据大屏的时候，除了柱状图、折线图、散点图…，还有，首先想到的是的表格，但是在后续的实现过程中，后端范围的列数是动态的，刚开始没有考虑到，然后采用了第一种方式，但是数据处理方式不太好，后来在Element官网查看了文档，就使用方式进行实现（第二种方式），不过两种方式都需要对数据进行处理第一种方式主要使用循环实现，页面逻辑比较简单，具体布局如下： 中数据如下： 使用来处理数据，将数据处理成渲染需要的格式，如下： 因为列数不固定，需要每一列的宽度也需要动态的计算，通过来实现，具体如下： 实现效果图如
vue3中如何使用动态组件
08-03
在Vue 3中，你可以使用动态组件来实现组件的动态渲染。你可以使用`<component>`标签，并通过`v-bind:is`属性来决定要渲染的实际组件。这个`is`属性可以是一个字符串，可以是HTML标签名，也可以是已注册的组件名。另外，你也可以直接将组件定义传递给`is`属性，而不是组件的名称。内置组件都可以传递给`is`属性，但如果你想通过名称传递组件，则需要先对其进行注册。如果将组件本身传递给`is`属性而不是其名称，则不需要注册。[2] 具体实现时，你可以在页面上注册需要使用的组件，然后使用`<component>`标签来动态渲染组件。你可以通过`v-bind:is`属性来指定要渲染的组件名称或组件定义。[3] 以下是一个示例代码，展示了如何在Vue 3中使用动态组件： ```html <template> <div> <button @click="switchComponent('A')">A组件</button> <button @click="switchComponent('B')">B组件</button> <button @click="switchComponent('C')">C组件</button> <component :is="currentComponent"></component> </div> </template> <script setup> import { ref } from 'vue'; import AComponent from './components/AComponent.vue'; import BComponent from './components/BComponent.vue'; import CComponent from './components/CComponent.vue'; const currentComponent = ref(''); const switchComponent = (componentName) => { currentComponent.value = componentName; }; </script> ``` 在上面的代码中，我们使用`<component>`标签来动态渲染组件。通过`v-bind:is`属性绑定了`currentComponent`变量，该变量保存了当前要渲染的组件名称。当点击不同的按钮时，调用`switchComponent`方法来切换要渲染的组件。[1] 希望这个例子能帮助你理解如何在Vue 3中使用动态组件。如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值