vue使用coreUI的CDataTable踩坑记录

vue使用coreUI的CDataTable踩坑记录

参考文档

所有关于coreUI组件的使用都在官方参考文档中有介绍，该优点时很全面，缺点是并不是每一个都会给示例操作。文档地址：https://coreui.io/vue/docs/components/table.html#usage

问题描述

我使用CDataTable遇到了以下几个问题：1、更改表头内容；2、对应表格数据（表格数据出现undefined）；3、不知道如何点击表中的行；4、分页栏居中设置 5、表头中的filter、items per page不会汉化，找不到出处（还未解决）

介绍表格中的属性

上图是我最终使用的表格的代码，依次介绍这些属性都是什么作用：

1. :items :绑定了data中的变量，array类型
2. :fields :绑定了表头的内容
3. table-filter :整表格所有字段输入后筛选过滤
4. items-per-page-select: 用户可选择每页多少条数据
5. :items-per-page： 自己设置每页多少条数据
6. hover: 鼠标hover变色
7. cleaner: 清空table-filter中已输入的内容
8. sorter: 提供排序工具
9. clickableRows： （文档说是规定表格可点击）但是我目前只知道他改了cursor的样式是pointer
10. @row-clicked：行被点击后触发方法（是所有表格共有的方法吧？）

当然参数还有很多，具体的可以看文档中的介绍。我的最终实现结果是：

更改表头内容

field是控制每一列内容

其中，key的作用是表示该列唯一，label是表头的内容。
key对应到组件中的使用如下：

    <CDataTable
      :items="softwareList"
      :fields="fields"
      table-filter
      items-per-page-select
      :items-per-page="8"
      hover
      cleaner
      sorter      
      clickableRows
      @row-clicked="clickRow"
      :pagination="{ doubleArrows: true, align: 'center'}">
      <template #opt_details