A Vue 2.x table component library with tree table and virtual scrolling support
A Vue 2.x table component library with tree table and virtual scrolling support.
npm install fytable
import Vue from 'vue';
import FyTable from 'fytable';
import 'fytable/dist/style.css';
Vue.use(FyTable);
<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>
| 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 |
| 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') |
ISC
<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重新渲染
<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重新渲染
FAQs
A Vue 2.x table component library with tree table and virtual scrolling support
We found that fytable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.