vite创建的vue项目怎么使用jsx来实现elementPlus表格表尾的合计有多行大的方法

vite创建的vue3项目安装@vitejs/plugin-vue-jsx

先附上代码效果

npm i @vitejs/plugin-vue-jsx -D
注意：vite的版本不同请安装不同版本的 /plugin-vue-jsx

我创建项目的vite版本是 4.3.9
所以我就按照了 3.0.2版本的vitejs/plugin-vue-jsx

安装完后需要在 vite.config.js 文件里引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx'   //引入jsx
const Timestamp = new Date().getTime();// https://vitejs.dev/config/
export default defineConfig({base: './',build: {sourcemap: false, // 输出.map文件,默认是falserollupOptions: {output: {chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,},}},//使用 jsxplugins: [vue(),vueJsx(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],})],
})

最后在页面代码里的 script 标签上写入 lang=‘jsx’ 就完事

<template><div style="width: 100%; height: 100vh; overflow: auto"><el-table:data="tableData"bordershow-summarystyle="width: 100%":summary-method="getSummaries"><el-table-column prop="id" label="ID" width="100" /><el-table-column prop="name" label="Name" width="100" /><el-table-column prop="name2" label="类型" width="100" /><el-table-column prop="amount1" width="180" sortable label="Amount 1" /><el-table-column prop="amount2" width="180" sortable label="Amount 2" /><el-table-column prop="amount3" width="180" sortable label="Amount 3" /><el-table-column prop="amount1" width="180" sortable label="Amount 1" /><el-table-column prop="amount2" width="180" sortable label="Amount 2" /><el-table-column prop="amount3" width="180" sortable label="Amount 3" /></el-table></div>
</template>
<script setup lang='jsx'>
import { ref } from "vue";
/***** 数据类的一定要写道 getSummaries这个方法前面，不然会报错* */
let yslr = ref([200, 458.56, 56369.20, -1500.6]); // 移动到这里
let aa = 66;
let tableData = ref([{id: "12987122",name: "Tom",amount1: "234",amount2: "3.2",amount3: 10,},{id: "12987123",name: "Tom",amount1: "165",amount2: "4.43",amount3: 12,},{id: "12987124",name: "Tom",amount1: "324",amount2: "1.9",amount3: 9,},{id: "12987125",name: "Tom",amount1: "621",amount2: "2.2",amount3: 17,},{id: "12987126",name: "Tom",amount1: "539",amount2: "4.1",amount3: 15,},
]);
// 参考文章： https://blog.csdn.net/black_cat7/article/details/121220980?ops_request_misc=%257B%2522request%255Fid%2522%253A%25226E4E7131-A91A-4705-A328-06ECDA165E95%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=6E4E7131-A91A-4705-A328-06ECDA165E95&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-121220980-null-null.nonecase&utm_term=elementUi&spm=1018.2226.3001.4450
const getSummaries = (param) => {console.log('这个是yslr', yslr.value);const { columns } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {// sums[index] ===> 就是根据index==0 找到的第一列  的  最下方的合并行sums[index] = (<div className="aaaa_div" style={{ backgroundColor: 'rgba(0, 0, 0, 0)', fontSize: '15px' }}>总计</div>);return;}/**1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了，然后往sums数组里面的对应位置插入数据** 通过 <br /> 实现换行==》多个合计行*! 在数组里插入html标签后，只要通过 {} 将数据处理包裹起来，就不会再被当成字符串了*? case 'amount1':  ===>一共有多少个表头，就有多少个case，用于根据表头，判断当前列，来生成这一列的最底部合并行的数据*/switch (column.property) {// 第一列的合并行数据// ! sums[index] ===> 就是根据column.property 找到的对应列  的  最下方的合并行// ===> 注意，填充数据的顺序要跟名称行对应好case 'name2':sums[index] = (<div className="aaaa_div"><div className="aa_one">预算利润</div><div className="aa_one">实际利润</div><div className="aa_one">差额</div><div className="aa_one">预算完成率</div></div>);break;case 'amount1':sums[index] = (<div className="aaaa_div">{yslr.value.map((item, i) => (<div key={i} className="aa_one">{item}</div>))}</div>);break;case 'amount2':sums[index] = (<div className="aaaa_div"><div className="aa_one">11111</div><div className="aa_one count_row_title">22222</div><div className="aa_one">33333</div><div className="aa_one count_row_title">44444</div></div>);break;case 'amount3':sums[index] = (<div className="aaaa_div"><div className="aa_one">11111</div><div className="aa_one count_row_title">22222</div><div className="aa_one">33333</div><div className="aa_one count_row_title">44444</div></div>);break;default:sums[index] = '';break;}});return sums;
};
function toPercent(point) {// var str = Number(point * 100).toFixed(1)  //  .toFixed(1)==>保留小数点后1位，自动四舍五入==> 因为截取了小数位，所以能防止js的运算失真（0.5*100=50.00..1）var str = parseInt(point * 100) // parseInt==>也能防止js的运算失真str += '%'return str
}
</script><style lang="less" scoped>
/deep/.el-table .cell {padding: 0;
}
// /deep/.el-table .el-table__cell{
//   padding: 0;
// }
</style>
<style>
.count_row_title {color: #f00;
}
.count_row {color: #36d;
}.aaaa_div {/* background-color: #89f0d1; */text-align: center;display: flex;flex-direction: column;
}
.aa_one {width: 100%;box-sizing: border-box;padding: 5px 10px;/* border: 1px solid #000000; */
}
</style>