ag-grid在Vue项目中的基本使用

最新推荐文章于 2024-08-28 16:49:35 发布
最新推荐文章于 2024-08-28 16:49:35 发布
阅读量2.2w 收藏 44
点赞数 8
分类专栏： Vue 文章标签： ag-grid Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/83584037
版权

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_modules/ag-grid-community/dist/styles/ag-theme-balham.css';

3、在Vue组建中的基本使用

<template>
  <div>
    <!-- columnDefs表头  rowData表格数据-->
    <!-- ag-theme-balham 是ag-grid自带的表格样式类 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

4、设置表格列宽可以随意拖动改变

<template>
  <div>
    <!-- 设置 :enableColResize="true" 就可实现表格列宽随意拖动改变 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableColResize="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

拖动后：

5、实现排序

<template>
  <div>
    <!-- 设置 enableSorting 为 true 就可实现表格数据排序-->
    <!-- 排序有默认顺序、升序、降序-->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableSorting="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

可以任意一列排序

6、实现筛选

<template>
  <div>
    <!-- 设置 enableFilter 为 true 就可实现筛选功能-->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableFilter="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

7、调整表格列宽大小自适应，避免横向滚动条

上面几个表格都有横向滚动条，

调用 Grid API 的 sizeColumnsToFit() 方法，就可以实现表格列宽大小自适应，避免横向滚动条

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableSorting="true" :enableFilter="true" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

8、实现单选

js中在绑定的表头 columnDefs 中增加 checkboxSelection: true 就会出现选择框，这个时候只能单选

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

9、实现多选

js中在绑定的表头 columnDefs 中增加 checkboxSelection: true 就会出现选择框，这个时候只能单选

然后在HTML中设置 rowSelection="multiple" 就可以实现多选了

<template>
  <div>
    <!-- 设置 rowSelection="multiple" 实现多选 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

10、获取选取的数据

调用 Grid API 的 getSelectedNodes() 方法，返回所选节点的列表

<template>
  <div>
    <button @click="getSelectedRows()">获取选择的数据</button>
    <!-- 设置 rowSelection="multiple" 实现多选 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    },
    getSelectedRows () {
      // 获取所选节点的列表
      const selectedNodes = this.gridApi.getSelectedNodes();
      console.log(selectedNodes);
      // 获取所选节点的列表数据
      var selectedData = selectedNodes.map(node => node.data);
      console.log(selectedData);
      // 获取所选节点的列表数据中的某一列数据
      var selectedDataName = selectedData.map(node => node.name);
      console.log(selectedDataName);
      // 拼接成字符串
      var selectedDataStringName = selectedDataName.join(', ');
      console.log(selectedDataStringName);
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
  margin-top: 20px;
}
</style>

11、给 columnDefs 的元素 设置 children，渲染分组表头。

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      // 给 columnDefs 的元素 设置 children，可以渲染出分组表头。
      columnDefs: [
        {
          headerName: '基本信息',
          children: [
            {headerName: '姓名', field: 'name'},
            {headerName: '性别', field: 'gender'},
            {headerName: '年龄', field: 'age'}
          ]
        },
        {
          headerName: '收入',
          children: [
            {headerName: '月收入', field: 'income'},
            {headerName: '年收入', field: 'yearIncome'}
          ]
        }
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, yearIncome: 24000},
        {name: '柳叶', gender: '女', age: 25, income: 2500, yearIncome: 35000},
        {name: '姜宇', gender: '男', age: 18, income: 1800, yearIncome: 20000}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 200px;
}
</style>

12、设置表格固定列宽：width

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: 'ID', field: 'id', width: 60},
        {headerName: '姓名', field: 'name', width: 100},
        {headerName: '性别', field: 'gender', width: 100},
        {headerName: '年龄', field: 'age', width: 100}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, id: 1},
        {name: '柳叶', gender: '女', age: 25, id: 2},
        {name: '姜宇', gender: '男', age: 18, id: 3}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

13、设置表格最小最大列宽minWidth,maxWidth

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: 'ID', field: 'id', maxWidth: 60},
        {headerName: '姓名', field: 'name', minWidth: 240},
        {headerName: '性别', field: 'gender', minWidth: 180},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, id: 1},
        {name: '柳叶', gender: '女', age: 25, id: 2},
        {name: '姜宇', gender: '男', age: 18, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

注意：需要同时设置表格列宽自适应，使用minWidth,maxWidth才会生效

14、鼠标单击某单元格选中，获取选中的数据

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <!-- 这些属性，不需要绑定，直接给属性值 -->
    <ag-grid-vue class="table ag-theme-balham"
      :columnDefs="columnDefs"
      :rowData="rowData"
      rowSelection="multiple"
      rowHeight="40"
      :enableSorting="true"
      :enableFilter="true"
      :enableColResize="true"
      :gridReady="onGridReady"
      :modelUpdated="onModelUpdated"
      :cellClicked="onCellClicked">
    </ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '', field: '', maxWidth: 44, checkboxSelection: true},
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'},
        {headerName: '收入', field: 'income'},
        {headerName: 'ID', field: 'id'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 1},
        {name: '柳叶', gender: '女', age: 25, income: 2500, id: 2},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    },
    onModelUpdated (param) {
      console.log('onModelUpdated');
      console.log(param);
    },
    onCellClicked (cell) {
      console.log(cell);
      // 获取选中的单元格的数据
      console.log(cell.value);
      // 获取选中的单元格所在的行号，从0开始
      console.log(cell.rowIndex);
      // 获取选中的单元格所在行的所有数据
      console.log(cell.data);
      // 获取选中的单元格所在列的表头的headerName 和 field
      console.log(cell.colDef);
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 240px;
}
</style>

15、总结

在Vue中使用ag-grid，ag-Grid属性使用v-bind进行属性绑定，但是当属性只是一个简单的字符串值时，则不需要绑定，只需将值作为属性放置，例如：

      rowSelection="multiple"  // 设置多选
      rowHeight="40"  // 设置单元格行高

有些事布尔型属性，默认值为false，例如：

      :enableSorting="true"
      :enableFilter="true"
      :enableColResize="true"

有些属性可以注册事件回调，例如：

      :gridReady="onGridReady"
      :modelUpdated="onModelUpdated"
      :cellClicked="onCellClicked"

 

sleepwalker_1992
关注
专栏目录
ag-grid-vue表格的一些问题总结（三）
weixin_44548681的博客
01-17 1445
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 ag-grid-vue 大数据动态加载服务器请求数据
jdjfjgfdgdfg的博客
06-18 1772
vue ag-grid-vue 渲染大数据表格 动态请求服务器数据设置子目录 目前只能是初始是一次性加载所有数据再分页渲染，还没有研究出滚动分页加载服务器。 这个方法是一次加载所有数据在前端再做的分页渲染。点击目录文件展开能动态加载服务器的数据显示子目录数据 安装插件： npm install --save ag-grid-enterprise ag-grid-community ag-grid-vue 代码实现 import { AgGridVue } from "ag-grid-vue"; imp
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 开源项目教程
gitblog_00661的博客
08-23 261
ag-grid-vue 开源项目教程 ag-grid-vueVue adaptor for ag-Grid项目地址:https://gitcode.com/gh_mirrors/ag/ag-grid-vue 项目介绍 ag-Grid 是一个功能强大的数据表格库，支持多种前端框架，包括 Vue.js。ag-grid-vue 是 ag-Grid 针对 Vue.js 的封装，提供了丰富的功能和灵活的配...
【ag-grid-vue】基本使用
趟过java，遇见web
08-24 3209
ag-grid是一款功能和性能强大外观漂亮的表格插件，ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。关于收费的问题，绝大部分应用用免费的社区版就够了，ag-grid-community社区版一样功能强大，本教程所有功能都是基于ag-grid-community社区版本实现。
AgGridVue 一款强大的表格组件（2）
qq_53343891的博客
07-26 1713
因为该组件功能强大，g-grid几乎能满足你对数据表格所有需求，所以分出一篇文章重点来讲一下常用的而且实用功能，今天打算讲一下他的非常好用的一些技巧，二话不说放上链接前面我已经介绍了基本的使用，以及常用的属性 ，可以见我上一篇文章今天要将的点。
推荐项目：ag-Grid Vue 组件
gitblog_00032的博客
06-16 641
推荐项目：ag-Grid Vue 组件 ag-grid-vueVue adaptor for ag-Grid项目地址:https://gitcode.com/gh_mirrors/ag/ag-grid-vue 1、项目介绍 ag-Grid Vue Component，虽然当前的仓库已被废弃，但它的旅程并未结束。这一强大的数据网格组件已迁移到新的单一存储库——ag-grid，其中针对Vue框架的部...
ag-Grid在Vue2项目下使用的简单总结
z19960925的博客
02-09 5777
ag-Grid在Vue2项目下使用的简单总结 前言：作为一个刚入行没多久的菜鸟前端，之前一直使用的是ElementUI和iView提供的表格，但是某些场景下这两个框架提供的表格组件并不能很好的满足需求（当然，也可能是本人能力有限）。而ag-grid给我的感觉是相当惊喜的，上手了一周多的时间，用到的功能也只有冰山一角，但是已经能体会到这个组件的强大了，印证了官网的标语（The Best JavaScript Grid in the World）。这篇文章旨在记录分享下自己的使用过程，也希望能给刚接触这个组件的
ag-grid-vue表格的一些问题总结（一）
01-08
ag-grid-vue表格的一些问题总结 1.表头居中和表格内容居中 找了很多资料也没有找到 在style标签中输入下面代码,就会居中。 /deep/ .ag-theme-balham [class^='ag-'], .ag-theme-balham [class^='ag-']:focus, .ag-...
ag-grid-vue-example-master.zip
06-17
通过阅读和运行这些示例，你可以快速上手并理解如何在实际项目中使用ag-Grid。 总之，ag-Grid与Vue的结合为开发者提供了强大的数据展示和管理工具。通过"ag-grid-vue-example-master.zip"中的示例，你可以深入学习...
ag-grid在Vue3项目中的基本使用
03-28
下面是ag-grid在Vue3项目中的基本使用步骤： 1. 安装ag-grid的Vue3适配器 ``` npm install --save ag-grid-community ag-grid-vue3 ``` 2. 在Vue3组件中引入ag-grid的Vue3适配器 ```javascript import { ...
Ag Grid 组件 Vue Data Grid: Components
huchaoyue_的博客
12-30 3666
VueJS 组件可以定义为简单的内联组件，也可以定义为完整/复杂的外部组件（即在单独的文件中）。每种组件类型（单元格渲染器、单元格编辑器等）的页面都包含如何注册和使用每种组件类型的例子。然而，在这里，退一步讲，把注意力集中在所有组件类型所共有的组件注册过程上，是很有用的。按名称直接引用（已弃用）网格完全支持这两个选项 - 但是我们建议按名称引用，因为不推荐使用直接引用注册。按名称注册也是两种选择中更灵活的一种，鉴于此，文档中的所有示例都使用按名称注册。
AgGridVue 一款强大的表格组件
qq_53343891的博客
07-25 678
AgGridVue，能够处理大规模数据集，支持虚拟滚动和高效的数据处理，从而提供平滑的用户体验，即使在处理大量数据时也能保持快速响应。
vue2.6 Ag-grid 使用
weixin_54966115的博客
12-16 5083
ag-grid简易使用方法
vue集成ag-grid框架
王延朕的博客
01-25 5108
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
Vue.js 中使用 AG Grid 实现高性能数据表格
最新发布
上进！努力！！！
08-28 1285
AG Grid 是一个支持多种框架（如 Vue、React、Angular 等）的数据表格库。高性能：即使是大数据集，AG Grid 也能保持流畅的滚动和操作体验。丰富的功能：支持排序、过滤、分页、单元格编辑、分组、导出等多种功能。高度可定制：用户可以根据需求定制表格的外观和行为。列定义 (Column Definitions)在 AG Grid 中，列定义是非常重要的配置。你可以为每一列配置排序、过滤、编辑等功能。
Ag-grid在vue中使用的必要属性
weixin_46724415的博客
10-24 1937
Ag-grid在vue中使用的必要属性 文档链接 id="myGrid"——唯一标识 @gridReady——渲染完成后的事件 :defaultColDef——this.defaultColDef = {}默认定义：所有的列都有的属性 :context—— this.context = { componentParent: this } 上下文对象 :rowData——表格数据 :columnDefs——this.columnDefs=[]每列数据 :pagination="true" 启动分页 &
vue3项目中使用css自定义高亮API实现Ag-grid搜索内容高亮
qq_34743346的博客
12-30 967
使用 CSS 自定义高亮 API，你可以通过编程方式创建文本范围并高亮显示它们，而不会影响页面中的 DOM 结构。可以完美解决我的需求。但要注意它的浏览器兼容性。感兴趣的小伙伴可以点此CSS 自定义高亮 API - Web API 接口参考 | MDN查看官方文档相关介绍。
ag-grid-vue实现全选反选及其他功能
taibaishenlong的专栏
11-05 2602
1、点击全选，则选择全部选项框，再点击一下反选，则不选任何选项框，先放一张实现图，如下所示： 2、html代码部分，如下所示： <div class="autoSizeDiv"> <el-row> <el-col :span="24" style="border: 1px solid #dfe6ec;"> <ag-grid-vue .
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值