表格 ​

import baTableClass from '/@/utils/baTable'
import { baTableApi } from '/@/api/common'
const baTable = new baTableClass(new baTableApi('table controller url'), {
    // 表格列数据，其中 type、align、operator 本称为列属性，所有可用属性可在下方查阅
    column: [
        { type: 'selection', align: 'center', operator: false },
})




    

import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
// defaultOptButtons 函数返回公共按钮数据（OptButton[]）
let optBtn = defaultOptButtons(['edit', 'delete'])
// 给第一个按钮加上点击事件
optBtn[0].click = (row: TableRow, field: TableColumn) => {
    console.log('点击了按钮')
// 自定义一个新的按钮
let newButton: OptButton[] = [
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        // 按钮名称
        name: 'info',
        // 鼠标放置时的 title 提示
        title: '详情',
        // 直接在按钮内显示的文字，title 有值时可为空
        text: '详情',
        // 按钮类型，请参考 element plus 的按钮类型
        type: 'primary',
        // 按钮 icon
        icon: 'fa fa-search-plus',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: TableRow, field: TableColumn) => {},
        // 按钮是否显示，请返回布尔值
        display: (row: TableRow, field




    
: TableColumn) => {
            return true
        // 按钮是否禁用，请返回布尔值
        disabled: (row: TableRow, field: TableColumn) => {
            return false
        // 自定义el-button属性
        attr: {}
// 新按钮合入到默认的按钮数组
optBtn = newButton.concat(optBtn)
// 实例化 baTable
const baTable = new baTableClass(new baTableApi('table controller url'), {
    // 表格列数据
    column: [
        { type: 'selection', align: 'center', operator: false },
            label: '操作',
            align: 'center',
            width: 120,
            render: 'buttons',
            // 表格列，渲染为 buttons，按钮数据为上面组装好的 optBtn
            buttons: optBtn,
            operator: false,
provide('baTable', baTable)

// 您可以先设置好一些表格属性，再执行“查看”请求
// 表格的所有可用属性，在本文下方可以寻找到，您也可以直接阅读源代码
const example1 = () => {
    baTable.table.filter.limit = 20
    baTable.table.filter.page = 2
    baTable.table.filter!.search = [{field:'status',val:'1',operator:'=',render:'tags'}]
    baTable.getIndex()
}

// 数据加载完成后打开公共搜索
baTable.getIndex()?.then




    
(() => {
    baTable.table.showComSearch = true
})

import router from '/@/router/index'
// 跳转到 user/moneyLog 页面，并携带 user_id 参数
router.push({
    name: 'user/moneyLog',
    query: {
        // user_id 字段存在于 user/moneyLog 页面表格的公共搜索中
        // user/moneyLog 页面内的表格公共搜索，会自动获取下列参数，如果存在，则自动填充并搜索
        user_id: baTable.form.items!.id,
})

const baTable = new baTableClass(api,
    // 表格参数
        // 表格的ref
        ref: undefined,
        // 数据表主键字段
        pk: 'id',
        // 数据源，通过api自动加载
        data: [],
        // 路由remark（显示到表格顶部的文案）
        remark: null,
        // 表格加载状态
        loading: false,
        // 是否展开所有子项
        expandAll: false,
        // 选中项
        selection: [],
        // 不需要'双击编辑'的字段
        dblClickNotEditColumn: [undefined],
        // 列数据
        column: [],
        // 数据总量
        total: 0,
        // 字段搜索,快速搜索,分页等数据
        filter: {
            limit: 10,
            page: 1,
            order: 'createtime',
            // 快速搜索，指定字段请在对应后端控制器内定义，默认为id
            quick_search: '快速搜索关键词',
            // 公共搜索
            search: [
                    'field': 'title',
                    'val': '搜索标题字段',
                    'operator': 'LIKE',
                    'render': 'tags',
        // 拖动排序限位字段:例如拖动行pid=1,那么拖动目的行pid也需要为1
        dragSortLimitField: 'pid',
        // 接受url的query参数并自动触发通用搜索
        acceptQuery: true,
        // 显示公共搜索
        showComSearch: false,
        // 扩展数据，预设的随意定义字段，整个baTable通常会暴露到上下文，定义后可在上下文中使用此属性
        extend: {},
    // 表单参数
        // 表单ref，new时无需传递
        ref: undefined,
        // 表单label宽度
        labelWidth: 160,
        // 当前操作:add=添加,edit=编辑
        operate: '',
        // 被操作数据ID,支持批量编辑:add=[0],edit=[1,2,n]
        operateIds: [],
        // 表单数据，编辑/添加时的表单字段当前输入和预加载的数据
        items: {},
        // 提交按钮状态
        submitLoading: false,
        // 默认表单数据(添加)
        defaultItems: {
            username: '默认用户名',
            nickname: '默认昵称',
        // 表单字段加载状态
        loading: false,
        // 扩展数据，预设的随意定义字段，整个baTable通常会暴露到上下文，定义后可在上下文中使用此属性
        extend: {},
    // 操作前置方法列表，返回false则取消原操作
        getIndex: () => boolean,// 查看前
        postDel: ({ids}: {ids: string[]}) => boolean,// 删除前
        requestEdit: ({ id }:




    
 { id: string }) => boolean,// 编辑请求前
        onTableDblclick: ({ row, column }: { row: TableRow; column: TableColumn }) => boolean,// 双击表格具体操作执行前
        toggleForm:({ operate, operateIds }: { operate: string; operateIds: string[] }) => boolean,// 表单切换前
        onSubmit:({ formEl, operate, items }: { formEl: FormInstance | undefined; operate: string; items: anyObj }) => boolean,// 表单提交前
        onTableAction: ({ event, data }: { event: string, data: anyObj }) => boolean,// 表格内事件响应前
        onTableHeaderAction: ({ event, data }: { event: string, data: anyObj }) => boolean,// 表格顶部菜单响应前
        mount: () => boolean,// 初始化前
    // 操作后置方法列表，先执行表格本身的查看、删除、编辑、双击、等，再执行本处添加的后置操作
        getIndex: ({ res }: { res: ApiResponse }) => void,// 查看后
        postDel: ({ res }:{ res: ApiResponse }) => void,// 删除后
        requestEdit: ({ res }: {res: ApiResponse}) => void,// 编辑请求后
        onTableDblclick: ({ row, column }: {row: TableRow, column: TableColumn}) => void,// 双击表格具体操作执行后
        toggleForm:({ operate, operateIds }: {operate: string, operateIds: string[]}) => void,// 表单切换后
        onSubmit:({ res }: {res: ApiResponse}) => void,// 表单提交后
        onTableAction: ({ event, data }: { event: string, data: anyObj }) => void,// 表格内事件响应后
        onTableHeaderAction: ({ event, data }: {event: string, data: anyObj}) => void,// 表格顶部菜单响应后
)

const baTable = new baTableClass(...)
// 重写表格内部的鉴权方法
baTable.auth = (node: string) => {
    return true
    // return auth({ name: '/admin/user/user', subNodeName: '/admin/user/user/' + node })
}

import baTableClass from '/@/utils/baTable'
import { baTableApi } from '/@/api/common'
import { userUser } from '/@/api/controllerUrls'
const baTable = new baTableClass(new baTableApi('table controller url'), {
    // 定义表格列数据、同时定义公共/通用搜索数据
    column: [
        // 关闭这个字段的公共搜索
        { type: 'selection', align: 'center', operator: false },
        // 此字段是模糊查找，并为公共搜索输入框设置了 placeholder
        { label: 'ID', prop: 'id', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query'), width: 70 },
        // 此字段是图片，建议关闭公共搜索
        { label: '头像', prop: 'avatar', align: 'center', render: 'image', operator: false },
        // 此字段将生成一个下拉框选择进行搜索，拥有三个值
            label: t('user.user.Gender'),
            prop: 'gender',
            align: 'center',
            render: 'tag',
            replaceValue: { '0': t('unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
        // 此字段将生成一个时间范围选择框，选择时间日期进行搜索
        { label: t('createtime'), prop: 'createtime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
        // 此字段将生成一个日期范围选择框，选择日期进行搜索（请注意渲染还是 datetime 若需自定义单元格渲染请参考`表格列`一节）
        { label: t('updatetime'), prop: 'updatetime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160, comSearchRender: 'date' },
        // 另外一种在公共搜索渲染下拉框的办法
            label: t('user.user.Gender'),
            prop: 'gender',
            align: 'center',
            comSearchRender: 'select',
            replaceValue: { '0': t('unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
        // 远程下拉选择框
        { label: '会员', prop: 'user_id'




    
, comSearchRender: 'remoteSelect', remote: {
            // 主键，下拉 value
            pk: 'id',
            // 字段，下拉 label
            field: 'username',
            // 远程接口URL
            // 比如想要获取 user(会员) 表的数据，后台`会员管理`控制器URL为`/index.php/admin/user.user/index`
            // 因为已经通过 CRUD 生成过`会员管理`功能，所以该URL地址可以从`/@/api/controllerUrls`导入使用，如下面的 userUser
            // 该URL地址通常等于对应后台管理功能的`查看`操作请求的URL
            remoteUrl: userUser + 'index',
            // 额外的请求参数
            params: {},
})