FyTable

A Vue 2.x table component library with tree table and virtual scrolling support.

Features

• Tree table support
• Virtual scrolling for large datasets
• Checkbox selection
• Custom column rendering
• Lazy loading for tree nodes
• Ant Design Vue integration

Installation

npm install fytable

Quick Start

import Vue from 'vue';
import FyTable from 'fytable';
import 'fytable/dist/style.css';

Vue.use(FyTable);

Usage

ETTable (Virtual Scroll Table)

<template>
  <div>
    <a-spin :spinning="spinning">
      <ETTable 
        :column="column" 
        :dataSource="dataSource" 
        :tableEvent="tableEvent" 
        :setCheckboxDefaultRows="setCheckboxDefaultValues" 
        :getCheckboxDisabled="getCheckboxDisabled" 
        v-bind="tableConfig"
      >
        <template v-slot:component="{row,text,rowIndex}">
          <div style="color:red;">{{text}}</div>
        </template>
        <template v-slot:menuType="{ row,text, rowIndex }">
          {{{"0":"菜单","1":"菜单","2":"按钮/权限"}[text] || '--'}}
        </template>
        <template v-slot:action="{ row, rowIndex }">
          <a-button type="primary">编辑</a-button>
          <a-button type="primary">编辑1</a-button>
        </template>
        <template slot="tableEmpty">
          <a-empty description="暂无数据"/>
        </template>
      </ETTable>
    </a-spin>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spinning: false,
      tableConfig: {
        isTree: true,
        isCheck: true,
        isLazyNode: false,
        tableConfig: {}
      },
      setCheckboxDefaultValues: [],
      column: [
        {
          title: "菜单名称",
          dataIndex: "name",
          key: "name",
          width: 300
        },
        // ... other columns
      ],
      dataSource: []
    };
  },
  methods: {
    tableEvent(type, data) {
      console.log('tableEvent===>', type, data);
    },
    getCheckboxDisabled(data) {
      return data.rowIndex === 4 ? false : true;
    }
  }
};
</script>

Props

ETTable Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | Array | [] | Table columns configuration | | dataSource | Array | - | Table data source | | isTree | Boolean | false | Enable tree table mode | | isCheck | Boolean | false | Enable checkbox selection | | isLazyNode | Boolean | false | Enable lazy loading for tree nodes | | event | Function | - | Table event handler | | getCheckboxDisabled | Function | - | Custom function to disable checkbox | | setCheckboxDefaultRows | Array | - | Default selected rows |

Column Configuration

| Property | Type | Default | Description | |----------|------|---------|-------------| | key | String | '' | Unique key for the column | | title | String | '' | Column header text | | align | String | 'left' | Column alignment ('left'/'right'/'center') | | dataIndex | String | - | Data field name | | render | String | - | Slot name for custom rendering | | width | Number | - | Column width | | fixed | String | - | Fixed column position ('left'/'right') |

License

ISC

2.ETTable 使用说明

<template>
  <div class="">
    <a-spin :spinning="spinning">
        <ETTable :column="column" :dataSource="dataSource" :tableEvent="tableEvent" :setCheckboxDefaultRows="setCheckboxDefaultValues" :getCheckboxDisabled="getCheckboxDisabled" v-bind="tableConfig">
            <template v-slot:component="{row,text,rowIndex}" >
              <div style="color:red;"> {{text}}</div>
            </template>
             <template v-slot:menuType="{ row,text, rowIndex }">
                {{{"0":"菜单","1":"菜单","2":"按钮/权限"}[text] || '--'}}
             </template>
             <template v-slot:action="{ row, rowIndex }">
                <a-button type="primary">  编辑 </a-button>
                <a-button type="primary">  编辑1 </a-button>
             </template>
             <template slot="tableEmpty">
                <a-empty description="暂无数据"/>
            </template>
        </ETTable>
    </a-spin>
  </div>
</template>
<script>
import getTableData, { flattenData } from "./utils/data";
const dataList = getTableData().result;
const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
    key: "name",
    width: 300,
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    key: "menuType",
    render: "menuType",
    width: 100,
  },
  {
    title: "版本",
    dataIndex: "menuVersion",
    key: "menuVersion",
  },
  {
    title: "icon",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "菜单标识",
    dataIndex: "sysModule",
    key: "sysModule",
  },
  {
    title: "组件",
    dataIndex: "component",
    key: "component",
    width: 200,
    render: "component",
  },
  {
    title: "路径",
    dataIndex: "url",
    key: "url",
    width: 200,
  },
  {
    title: "排序",
    dataIndex: "sortNo",
    key: "sortNo",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    render: "action",
    align: "center",
    width: 150,
  },
];
export default {
  name: 'index',
  data() {
    // 这里存放数据
    return {
        spinning:false,
        tableConfig:{
            isTree:true,
            isCheck:true,
            isLazyNode:false,
            // tableConfig:{MAX_HEIGHT:0},
            tableConfig:{},
        },
        setCheckboxDefaultValues:[],
        column:columns,
        dataSource:[]
    };
  },
  mounted() {
    this.spinning = true;
    setTimeout(() => {
      this.setCheckboxDefaultValues = [dataList[0],dataList[10]];
      this.dataSource = dataList;
      this.spinning = false;
    }, 0);
   
  },
  // 方法集合
  methods: {
    tableEvent(type,data){
        console.log('tableEvent===>',type,data);
    },
    getCheckboxDisabled(data){
        // console.log('getCheckboxDisabled===>',data);
        if(data.rowIndex == 4){
            return false;
        }
        return true
    }
  },
  }
</script>

参数说明

本组件不包含独立事件，只有【props】属性或函数，具体如下：

props: {
    columns: { type: Array, default: () => { return []; }, },
    tableData: { type: Array },
    isTree: { type: Boolean, default: false },
    isCheck: { type: Boolean, default: false },
    event:{type:Function},
    getCheckboxDisabled:{type:Function},
    setCheckboxDefaultRows:{type:Array},
    isLazyNode:{type:Boolean, default: false},
    lazyFun:{type:Function},
},

相关参数说明

columns： table的表头对象数组，属性包含 key, title, align, dataIndex, scopedSlots, customRender, width
          ## 属性说明
            | 属性名       | 说明                                   | 类型  |  默认值 |
            | ---------- | --------------------------------------- | ----- | ------ |
            | key    | vue需要，用于标记唯一 | string | ''|
            | title  | 列头显示文字 | string | '' |
            | align  | 设置列内容的对齐方式 | 'left' / 'right' / 'center' | 'left' |
            | dataIndex | 列数据在数据项中对应的英文字段名称 | string | - |
            | render | 使用 columns 时，可以通过该属性配置支持 slot 的属性，如 render: 'XXX' | string | - |
            | width | 列的宽度 | number | - |
            | fixed | 是否固定列 可用值 "left", "right" | string | - |

tableData：    table的数据，以数组形式呈现
isTree：       是否开启table的tree数据的显示能力，true 表示开启， false 表示不开启； 开启时需要设置 rowKey 和 rowParentKey 的值  默认值： false
isCheck：      是否开启table的 CheckBox 能力， true 表示开启， false 表示不开启； 默认值： false
isLazyNode:    是否启用懒加载（树形结构数据时有用） true 表示开启， false 表示不开启； 默认值： false
lazyFun:       懒加载使用的方法 (params):Promise=>{}  返回Promise对象， 参数 params= {colIndex,column,row,rowIndex,value}
event：        主要用于table的自身事件，目前只支持 CheckBox 的change 事件
getCheckboxDisabled： 用于设置CheckBox是否可用的函数， (params)=> Boolean   返回值为true时，checkbox不可选 返回值为false时，checkbox可选; 参数 params= {row,rowIndex}
setCheckboxDefaultRows： 用于设置默认选中值；是当前行的数据对象；如果是动态设置的话需要再当前值变化之后更新一下tableData中的数据使table重新渲染

3.FYTable 使用说明

       <FYTable :loading="loading" :columns="columns" :isCheck="true" :isTree="true" :event="event" :setCheckboxDefaultValues="defaultValArr" :getCheckboxDisabled="getCheckboxDisabled" :tableData="dataList" :width="1500" :height="500">
        <template v-slot:component="{row, text, rowIndex, cellIndex}" >
            <div style="color:red;"> {{text}}</div>
        </template>

    </FYTable>

参数说明

本组件不包含独立事件，只有【props】属性或函数，具体如下：

props: {
    columns: { type: Array, default: () => { return []; }, },
    tableData: { type: Array },
    rowKey: { type: String, default: "id" },
    rowParentKey: { type: String, default: "parentId" },
    isTree: { type: Boolean, default: false },
    isCheck: { type: Boolean, default: false },
    event:{type:Function},
    width:{type:[Number,String]},
    height:{type:[Number,String]},
    loading:{type:Boolean,default:false},
    indentSize:{type:Number,default:20},
    getCheckboxDisabled:{type:Function},
    setCheckboxDefaultValues:{type:Array}
},

相关参数说明

columns： table的表头对象数组，属性包含 key, title, align, dataIndex, scopedSlots, customRender, width
          ## 属性说明
            | 属性名       | 说明                                   | 类型  |  默认值 |
            | ---------- | --------------------------------------- | ----- | ------ |
            | key    | vue需要，用于标记唯一 | string | ''|
            | title  | 列头显示文字 | string | '' |
            | align  | 设置列内容的对齐方式 | 'left' / 'right' / 'center' | 'left' |
            | dataIndex | 列数据在数据项中对应的英文字段名称 | string | - |
            | scopedSlots | 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'} | object | - |
            | customRender | 自定义设置单元格数据函数 | Function(text):any | - |
            | width | 列的宽度 | number | - |

tableData：    table的数据，以数组形式呈现
rowKey：       表示数据项的主键，此项可以提高性能，请按照实际设置相应的字段名称， 默认值为：id
rowParentKey： 用于设置父级字段名称，主要用于树形结构数据时使用，请按照实际设置相应字段名称， 默认值为：parentId
isTree：       是否开启table的tree数据的显示能力，true 表示开启， false 表示不开启； 开启时需要设置 rowKey 和 rowParentKey 的值  默认值： false
isCheck：      是否开启table的 CheckBox 能力， true 表示开启， false 表示不开启； 默认值： false
event：        主要用于table的自身事件，目前只支持 CheckBox 的change 事件
width：        表示table的宽度，需要自行设置，请根据情况进行设置
height：       表示table的高度， 需要自行设置，请根据情况进行设置
loading：      用于请求table数据时加载的提示动画
indentSize：   展示树形数据时，每层缩进的宽度，以 px 为单位
getCheckboxDisabled： 用于设置CheckBox是否可用的函数， ()=> Boolean   返回值为true时，checkbox不可选 返回值为false时，checkbox可选
setCheckboxDefaultValues： 用于设置默认选中值； 可以是主键id，也可以是当前行的数据对象；如果是动态设置的话需要再当前值变化之后更新一下tableData中的数据使table重新渲染