[vue]【vue3】element plus 中使用jsx 的方法

vue3 + element plus 中使用jsx的方法



1、 由于vite搭建的项目默认不支持jsx，需要先安装@vitejs/plugin-vue-jsx插件
//yarnyarn add @vitejs/plugin-vue-jsx -D
//npmnpm install @vitejs/plugin-vue-jsx -D



2. 在 vite.config.js配置

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({  plugins: [vue(),vueJsx()]
 }）

3.使用jsx的方式就比较简捷了，需要在script标签设置lang属性等于jsx，在cellRenderer函数中可以直接使用jsx的语法和UI组件（还有自定义组件）


<script lang="jsx" setup>
      import { ElButton } from "element-plus";
     const columnn =[{
           key: "handle",
           title: "操作",
           width: 200,
           align: "center",
           cellRenderer: (data) => (
           <>
               <el-button
               type="danger"
               icon="Delete"
               onClick={handleDelete.bind(this, data)}
               >
               删除
               </el-button>
              <el-button
               type="primary"
               icon="Edit"
               onClick={handleDelete.bind(this, data)}
               >
               修改
               </el-button>
           </>
           ),
       }]
</script>
参考：https://blog.csdn.net/Mr_WangGeGe/article/details/127275868