FastTable界面
FastTable组件
fast-table是Fast-Crud前端核心组件，没有之一。观察下面这个例子：
<template>
<div id="app">
<fast-table :option="tableOption">
<fast-table-column prop="id" label="ID"></fast-table-column>
<fast-table-column-img prop="avatarUrl" label="头像"></fast-table-column-img>
<fast-table-column-input prop="name" label="姓名" first-filter></fast-table-column-input>
<fast-table-column-number prop="age" label="年龄"></fast-table-column-number>
<fast-table-column-select prop="sex" label="性别" :options="[{label: '男', value: '1'}, {label: '女', value: '0'}]"></fast-table-column-select>
<fast-table-column-date-picker prop="createTime" label="创建时间" type="datetime" :editable="false" :quick-filter="true"></fast-table-column-date-picker>
</fast-table>
</div>
</template>
<script>
import {FastTableOption} from 'fast-crud-ui'
export default {
name: 'App',
data() {
return {
tableOption: new FastTableOption({
module: 'student'
})
}
}
}
</script>fast-table 组件只提供了一个配置: option，是一个FastTableOption实例，通过json配置构造这个实例。完整的配置项如下表：
FastTableOption配置项
注意：
针对所有钩子函数，你都需要返回一个Promise! 如果希望后续步骤正常进行，则返回 Promise.resolve()；如果希望中断后续步骤，则返回Promise.reject()。
只有loadSuccess在resolve时需要指定参数和格式，其它钩子函数resolve()即可。
钩子函数中,
row表示原始数据（即每个student的json数据），而fatRow表示针对原始数据的封装，详细结构参见下文。而rows和fatRows即是对应的数组。
关于context
context的唯一作用是让你在钩子函数里获取到当前组件this, 以便获取当前组件的data或method，建议配置。
关于钩子函数
针对钩子函数，务必注意以下几点：
所有钩子函数都需要返回一个Promise! 如果希望后续步骤正常进行，则返回 Promise.resolve()；如果希望中断后续步骤，则返回Promise.reject()。
只有loadSuccess在resolve时需要指定参数和格式，其它钩子函数resolve()即可，reject()均是空即可，任意值也行，无所谓。
关于fatRow
由于要实现灵活的表格行内编辑，因此必须对el-table原生接受的行数据进行包装。一个fatRow格式如下:
{
row: {...}, // 原始行数据，例如一个student数据对象，包含name, age等
editRow: {...}, // 正在编辑的原始行数据。相当于行内编辑时用户修改的值，如果status=insert，则是新增时用户填写的值。
status: 'update',// 当前行的状态: 是新增 or 更新
config: {...} // 描述输入控件的元配置
}FastTableOption完整配置参考
{
context: this, // important! 否则钩子函数里无法获取当当前组件实例上下文
title: '',
module: 'student', // 配置了这个, 默认分页接口就是: student/page, 新增接口就是: student/insert, 其它同理。除非定制化, 其它url配置可省略
insertUrl: 'student/insert',
batchInsertUrl: 'student/insert/batch',
updateUrl: 'student/update',
batchUpdateUrl: 'student/update/batch',
deleteUrl: 'student/delete',
batchDeleteUrl: 'student/delete/batch',
uploadUrl: 'student/upload',
exportUrl: 'student/export',
enableDblClickEdit: true,
enableMulti: true,
enableColumnFilter: true,
lazyLoad: false,
editType: 'inline',
insertable: true,
updatable: true,
deletable: true,
sortField: 'createTime',
sortDesc: true,
pagination: {
size: 10,
"page-sizes": [5, 10, 20, 50, 100]
},
style: {
flexHeight: true,
size: 'medium',
bodyRowHeight: '45px',
formLabelWidth: 'auto', // 默认为auto
formLayout: 'avatarUrl, name|age, sex|createTime'
},
beforeLoad({query}) {
// 更改query的值，相当于二次编辑分页请求的参数
query.addCond(new Cond('name', 'like', '利威尔'));
return Promise.resolve();
},
loadSuccess({query, data, res}) {
const {records, total} = data;
// 可篡改records里的数据
return Promise.resolve(data);
},
loadFail({query, error}) {
console.log('哦豁, 分页加载失败了:' + JSON.stringify(error));
return Promise.reject(); // reject将取消内置错误提示
},
beforeInsert({fatRows, rows, editRows}) {
if (editRows.findIndex(r => r.name === '李四') > -1) {
console.log('不允许添加李四');
return Promise.reject();
}
return Promise.resolve(editRows);
},
insertSuccess({fatRows, rows, editRows, res}) {
console.log('啧啧啧, 插入成功啦!');
return Promise.reject(); // 取消内置的插入成功提示
},
insertFail({fatRows, rows, editRows, error}) {
console.log('哦豁, 插入失败了!');
return Promise.reject(); // reject将取消内置提示
},
beforeToUpdate({fatRows, rows}) {
if (rows.findIndex(r => r.name === '阿明') > -1) {
console.log("阿明不允许编辑")
return Promise.reject();
}
return Promise.resolve();
},
beforeUpdate({fatRows, rows, editRows}) {
if (editRows.findIndex(r => r.name === '张三') > -1) {
console.log('名字不允许改为张三');
return Promise.reject();
}
return Promise.resolve(editRows);
},
updateSuccess({fatRows, rows, editRows, res}) {
console.log('恭喜更新成功!')
return Promise.reject(); // 取消内置提示
},
updateFail({fatRows, rows, editRows, error}) {
console.log('哦豁，更新失败!')
return Promise.reject(); // 取消内置提示
},
beforeDeleteTip({fatRows, rows}) {
if (rows.findIndex(r => r.name === '利威尔') > -1) {
console.log('不能删除利威尔');
return Promise.reject();
}
return Promise.resolve();
},
beforeDelete({fatRows, rows}) {
if (rows.findIndex(r => r.name === '珊莎') > -1) {
console.log('删除记录中包含珊莎, 你已勾选不能删除珊莎');
return Promise.reject();
}
return Promise.resolve(rows);
},
deleteSuccess({fatRows, rows, res}) {
if (rows.findIndex(r => r.name === '艾伦') > -1) {
console.log('恭喜恭喜! 删除对象中包含艾伦');
return Promise.reject(); // 通过reject覆盖默认的删除成功提示
}
return Promise.resolve();
},
deleteFail({fatRows, rows, error}) {
console.log('哦豁, 删除失败了! ' + JSON.stringify(error));
return Promise.reject(); // 通过reject覆盖默认的删除失败提示
},
beforeCancel({fatRows, rows, status}) {
if (status === 'update') {
console.log('更新时不允许取消')
return Promise.reject();
}
return Promise.resolve();
}
}FastTable Methods
除了上述FastTableOption可以配置FastTable外，还可以通过给FastTable组件添加ref从而主动调用其中的方法。支持的方法列表如下：