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文件,默认是false
    rollupOptions: {
      output: {
        chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,
      },
    }
  },
  //使用 jsx
  plugins: [vue(),vueJsx(),AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  })],
})

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

<template>
  <div style="width: 100%; height: 100vh; overflow: auto">
    <el-table
      :data="tableData"
      border
      show-summary
      style="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>