1.1.4 • Published 3 months ago
fytable v1.1.4
1.Common
npm安装:
npm i fytable2.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重新渲染