vue版本升级导致 ag-grid-vue3的问题

已于 2022-11-23 19:21:53 修改
阅读量719 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-11-17 13:51:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38267287/article/details/127902357
版权

1、导致cellRenderer里面无法使用 v-for，目前只能通过降低版本来处理

2、其中vue3.2.4* 以上的版本 导致 定义一个组件无法获取到里面参数的问题
        比如说： const com = 组件名；com获取不到组件的值，通过 expose暴露出来

找回逝去的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ag-grid-vue表格的一些问题总结（一）
01-08
ag-grid-vue表格的一些问题总结 1.表头居中和表格内容居中 找了很多资料也没有找到 在style标签中输入下面代码,就会居中。 /deep/ .ag-theme-balham [class^='ag-'], .ag-theme-balham [class^='ag-']:focus, .ag-theme-balham [class^='ag-']:after, .ag-theme-balham [class^='ag-']:before { text-align: center; } /deep/ .ag-header-cell-text{ text-align: c
ag-grid社区版中文版提示
07-09
ag-grid我没找到汉化提示的js（没仔细找），下载了官方的社区版js代码，记事本查找替换的，如果没积分可以自己搜索替换，我只改了contains（模糊查找）、not contains（模糊过滤）、equals（精确查找）、not equals（精确过滤）、starts with（以...开始）、end with（以...结尾），需要其他中文或者我改的中文不合适的请自行替换。
推荐一个非常好用的表格组件 - AG Grid
最新发布
杨树林er的博客
03-13 1410
AG-Grid是一个高级数据网格，适用于JavaScript / TypeScript应用程序。AG-Grid没有其他依赖项，不需要提前加载 Vue 或 React 或 Angular，甚至不使用 JQuery、Undercore 或 LoDash。没有依赖性意味着AG-Grid可以与任何框架一起工作。
ag-grid-vue-用于ag-Grid的Vue适配器。-Vue.js开发
05-27
ag-Grid ag-Grid是功能齐全且高度可定制JavaScript数据网格。 它具有出色的性能，没有任何第三方依赖性ag-Grid ag-Grid是功能齐全且高度可定制JavaScript数据网格。 它具有出色的性能，没有第三方依赖性，并且可以与所有主要JavaScript框架顺利集成。 这是启用了多个过滤器和分组的网格的外观：功能除了您希望从任何网格获得的标准功能集之外：列交互（调整大小，重新排序和固定列）分页排序行选择这是一些功能做ag-Gri
ag-grid-vue-example-master.zip
06-17
ag-grid 的vue版本的模块化。
ag-grid-vue纵向合并单元格
trabecula_hj的博客
02-07 910
ag-grid-vue纵向合并单元格，分页功能，配置，基本使用
vue集成ag-grid框架
王延朕的博客
01-25 4836
VUE2集成方案 1.创建vue项目 2.添加依赖 npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0 3.在src/App.vue添加样式 <style lang="scss"> @import "~ag-grid-community/dist/styles/ag-grid.css"; @import "~ag-grid-community/dist/styles/ag-them
ag-grid总结
gz775的专栏
10-08 987
ag-grid总结
vue3项目中使用css自定义高亮API实现Ag-grid搜索内容高亮
qq_34743346的博客
12-30 721
使用 CSS 自定义高亮 API，你可以通过编程方式创建文本范围并高亮显示它们，而不会影响页面中的 DOM 结构。可以完美解决我的需求。但要注意它的浏览器兼容性。感兴趣的小伙伴可以点此CSS 自定义高亮 API - Web API 接口参考 | MDN查看官方文档相关介绍。
Ag Grid 组件 Vue Data Grid: Components
huchaoyue_的博客
12-30 2888
VueJS 组件可以定义为简单的内联组件，也可以定义为完整/复杂的外部组件（即在单独的文件中）。每种组件类型（单元格渲染器、单元格编辑器等）的页面都包含如何注册和使用每种组件类型的例子。然而，在这里，退一步讲，把注意力集中在所有组件类型所共有的组件注册过程上，是很有用的。按名称直接引用（已弃用）网格完全支持这两个选项 - 但是我们建议按名称引用，因为不推荐使用直接引用注册。按名称注册也是两种选择中更灵活的一种，鉴于此，文档中的所有示例都使用按名称注册。
ag-grid-vue表格的一些问题总结（三）
weixin_44548681的博客
01-17 1325
ag-grid-vue表格的一些问题总结（三） 1.表格合并纵向和横向 //左右合并 //绑定的表头加入colSpan属性 { field: 'country', colSpan: function (params) { const country = params.data.country; if (country === 'Russia') { // have all Russia age columns width 2 retu
vue实现表格过滤功能
10-16
主要为大家详细介绍了vue实现表格过滤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ag-grid在Vue项目中的基本使用
热门推荐
sleepwalker_1992的专栏
11-01 2万+
ag-grid官网 1、安装 npm install ag-grid-community ag-grid-vue --save-dev 2、在main.js中引入ag-grid的样式文件 // 引入ag-grid的样式文件 import '../node_modules/ag-grid-community/dist/styles/ag-grid.css'; import '../node...
ag-grid 中自定义渲染html标签及样式
板砖工KO水泥匠
09-02 1786
ag-grid 中自定义渲染html标签及样式 export default export default { data () { return { ······ // datatable columnDefs: null, rowData: null, modules: [], gridOptions: null,
如何使用ag-Grid
Jane_2160的博客
01-09 5573
ag-Grid是一个功能齐全的JavaScript数据表格组件。它提供了卓越的性能，没有第三方依赖，并与所有主要的JS框架顺利集成。不同框架支持相同的API。该框架可以支持Angular、React、Vue、Aurelia、WebComponents、Javascript等框架。分为社区版（Community）和商业版（Enterprise），社区版完全免费代码开源，商业版为企业客户提供团队支持(需要许可证)。
结合AG-Grid二次封装element-plus的el-table表格
qq_52696618的博客
05-15 1013
ag-grid二次封装element-plus的el-table表格，封装组件以及使用。
记录：基于vue使用ag-grid表格（基本用法）
J_lucky的博客
05-09 675
首先还是安装ag-grid。在main.js引入。
ag-Grid Enterprise v28.2.1 企业版注册版
控件与插件之大全
12-07 1742
ag-Grid Enterprise v28.2.1 的性能、功能集和质量在 JavaScript 数据网格中前所未见。AG Grid 中的许多功能都是 AG Grid 独有的，并且只是将 AG Grid 归为一类，而不会影响质量或性能。
ag-grid-vue3 cellRenderer 使用element-plus
05-10
如果你想在 ag-grid-vue3 中使用 element-plus 作为 cellRenderer，你可以按照以下步骤进行操作： 1. 安装 element-plus 你需要先安装 element-plus，可以通过 npm 或者 yarn 进行安装。具体安装方式可以参考 element-plus 的官方文档。 2. 创建 cellRenderer 在 ag-grid-vue3 中，你可以通过创建一个 Vue 组件来作为 cellRenderer。因此，你需要创建一个 Vue 组件，并在其中使用 element-plus 组件来渲染单元格内容。例如，你可以创建一个名为 `MyCellRenderer` 的组件，代码如下： ``` <template> <el-button type="primary" size="small" @click="onButtonClick">{{ params.value }}</el-button> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ props: ['params'], methods: { onButtonClick() { // 在这里可以处理按钮点击事件 } } }) </script> ``` 在这个组件中，我们使用了 element-plus 的 `el-button` 组件来渲染单元格内容。当用户点击按钮时，我们可以在 `onButtonClick` 方法中进行相应的处理。 3. 在 ag-grid-vue3 中使用 cellRenderer 最后，你需要在 ag-grid-vue3 中使用刚才创建的 cellRenderer。具体做法是，在 `columnDefs` 中指定 `cellRendererFramework` 属性为你创建的组件。例如，你可以这样定义一个列： ``` { field: 'name', headerName: 'Name', cellRendererFramework: MyCellRenderer } ``` 在这个例子中，我们将 `cellRendererFramework` 属性指定为 `MyCellRenderer` 组件，这样在单元格中就会渲染我们定义的 element-plus 组件了。 希望这个回答能够帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值