ag-grid-vue3 使用element-plus

ag-grid-vue3 是一个用于 Vue3 的数据表格组件，而 element-plus 是一个基于 Vue3 的 UI 组件库。虽然这两个组件库可以独立使用，但是它们可以一起使用以增强 UI 功能。

首先，你需要在项目中安装 element-plus，可以使用 npm 或 yarn 安装，如下所示：

npm install element-plus --save

或

yarn add element-plus

安装完成后，在 Vue3 中使用 element-plus 组件，你可以在 main.js 文件中使用以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这里我们在 main.js 中导入了 ElementPlus 组件，并使用 app.use(ElementPlus) 将组件注册到 Vue3 中。注意，为了让样式生效，你需要在 main.js 中引入 element-plus/lib/theme-chalk/index.css。

接下来，在 ag-grid-vue3 中使用 element-plus 组件，你可以在 ag-grid-vue3 的 columnDefs 中使用 element-plus 的组件，例如：

{
  headerName: '姓名',
  field: 'name',
  cellRendererFramework: {
    template: '<el-button>{{ value }}</el-button>',
    data() {
      return {
        value: ''
      }
    },
    mounted() {
      this.value = this.params.value
    }
  }
}

这里我们在 ag-grid-vue3 的 columnDefs 中使用了 element-plus 的 el-button 组件作为单元格渲染器，这样我们就可以在 ag-grid-vue3 中使用 element-plus 的组件了。