x-data-grid

安装

npm install x-data-grid -S

使用

import Vue from 'vue'

import xDataGrid from 'x-data-grid'
Vue.use(xDataGrid)
import 'x-data-grid/lib/xDataGrid.css'

Demo ：https://wuchuanxun.github.io/x-data-grid/

参数配置

列定义

插槽使用

<template
    slot="slotName"
    slot-scope="text,record,index"
>
    <a>
        {{ text }}
    </a>
</template>

其中 text = record[key]

事件

注：双击启用编辑，回车确定更改

行选择

_checked 属性表示是否选中

行展开

_expanded 属性表示是否展开， 展开渲染插槽

<p
   slot="expandedRowRender"
   slot-scope="record,index"
>
    {{record}} {{index}}
</p>

自定义筛选

overwriteSearch 用自己的筛选代替原有的 调用节点函数 filterData, 传入筛选的函数，函数接收原始的数组作为输入，返回筛选后的数组

修改行间距

.x-data-grid {
    th,td{
      padding: 4px 6px !important;
    }
}

单元格合并案例

const renderAttrs = function(value,row,index,source){
  // 如果重复就不画
  if (index > 0 && source[index].pCode === source[index - 1].pCode) {
    return {
      rowspan: 0
    }
  }

  let rowspan = 1
  const pCode = source[index].pCode

  let i = index + 1
  while (i < source.length && source[i].pCode === pCode) {
    i++
    rowspan++
  }

  // 合并同类项
  return {
    rowspan: rowspan
  }
}

函数第一个参数是当前单元格数值、第二个参数是当前行，第三个参数是下标，第四个参数是数据列表

最后返回行列合并的配置：

{
    rowspan: 1,
    colspan: 1
}