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-button type="primary" size="small" @click="goBack"
              >页面跳转</el-button
            >
    <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="Amount1" />
      <el-table-column prop="amount2" width="180" sortable label="Amount2" />
      <el-table-column prop="amount3" width="180" sortable label="Amount3">
        <template #default="scope">
                
                <div
                  style="display: flex"
                >
                  <el-input-number
                    style="width: 100%"
                    size="small"
                    controls-position="right"
                    v-model="scope.row.amount3"
                    :min="0"
                    :step="0.01"
                    :precision="2"
                  />
                  <el-button
                    style="margin-left: 5px"
                    size="small"
                    type="warning"
                    >保存</el-button
                  >
                </div>
              </template>
      </el-table-column>
      <el-table-column prop="amount1" width="180" sortable label="Amount4" />
      <el-table-column prop="amount2" width="180" sortable label="Amount5" />
      <el-table-column prop="amount3" width="180" sortable label="Amount6" />
    </el-table>
  </div>
</template>
  <script setup lang='jsx'>
import { useRouter, useRoute } from "vue-router";
  import { ref,onMounted } from "vue";
  const router = useRouter();
const route = useRoute();
onMounted(()=>{
    console.log('携带的参数',route.query);
})
const goBack = () => {
      router.go(-1); // 返回上一个页面
    };
  /****
   * 数据类的一定要写道 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,data } = 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':
        let values = [];
          if (column.label === "Amount3") {
            values = data.map((item) => {
              return Number(item[column.property]);
            });
          }
          let sum_zjzmoney=0;
          if (!values.every((value) => isNaN(value))) {
            sum_zjzmoney = values
              .reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return Number(prev * 100 + curr * 100) / 100;
                } else {
                  return prev;
                }
              }, 0)
              .toFixed(2);
          } else {
            sum_zjzmoney = 0;
          }
          sums[index] = (
            <div className="aaaa_div">
              <div className="aa_one">11111</div>
              <div className="aa_one count_row_title">{sum_zjzmoney}aaaa</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>