Jeecg3.8.2 前端经验汇总

1. 表格

1.1 数据项主键

列表接口中的数据项，默认主键为id，我的数据主键是guid，在useListPage的参数tableProps中增加如下参数：

javascript 复制代码

rowKey: 'guid'

1.2 显示序号列

在useListPage的参数tableProps中增加如下参数：

javascript 复制代码

showIndexColumn: true

该序号列的数值为全局序号。

1.3 隐藏操作列

在useListPage的参数tableProps中增加如下参数：

javascript 复制代码

showActionColumn: false

1.4 操作列宽度

在useListPage的参数tableProps中增加如下参数：

javascript 复制代码

actionColumn: {
  width: 120,
  fixed: 'right'
}

1.5 数据列表中的数据排序

默认代码，后端列表接口中的数据排序，是由前端设定的，默认是按createTime倒序。如果我想改为按name正序，修改tableProps中的beforeFetch即可：

javascript 复制代码

...
beforeFetch: (params) => {
    params.column = 'name';
    params.order = 'asc';
    ...
},
...

1.6 操作列按钮样式

想将操作列的"删除"按钮改为红色，修改如下代码：

javascript 复制代码

function getDropDownAction(record) {
    return [
        ...
        {
            label: '删除',
            style: 'color:red',
            ...
        },
        ...
    ]
}

1.7 搜索区域

1.7.1 隐藏搜索区域

useListPage的参数tableProps中的formConfig增加如下参数：

javascript 复制代码

useSearchForm: false

或者不设置搜索项，删除tableProps参数formConfig中的"schemas"项。

1.7.2 不显示"展开"按钮

useListPage的参数tableProps中的formConfig增加如下参数：

javascript 复制代码

showAdvancedButton: false

1.7.3 搜索项标签宽度

useListPage的参数tableProps中的formConfig增加如下参数：

javascript 复制代码

labelWidth: 150

2. 对话框

2.1 阻止关闭对话框

打开了对话框，鼠标点击了空白半透明区域，或者按到了Esc键，对话框瞬间关闭了，输入的内容也丢失了。

（1）antdv的默认对话框

antdv的对话框是"a-modal"，增加如下属性即可：

html 复制代码

<a-modal :maskClosable="false" :keyboard="false" ...>
...
</a-modal>

（2）构架自定义对话框BasicModal

修改文件"/src/components/Modal/src/components/Modal.tsx"，最后return代码按如下修改：

javascript 复制代码

export default defineComponent({
    name: 'Modal',
    ...
    setup(props, { slots, emit }) {
        ...
        return () => {
            const propsData = { ...unref(attrs), ...props, onCancel } as Recordable;
            propsData.maskClosable = false;
            propsData.keyboard = false;
            return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
        }
    },
});