refactor: 统一 vxe-table 页面代码风格
This commit is contained in:
parent
5727b2245b
commit
19b145597e
@ -40,14 +40,20 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
field: "username",
|
field: "username",
|
||||||
itemRender: {
|
itemRender: {
|
||||||
name: "$input",
|
name: "$input",
|
||||||
props: { placeholder: "用户名", clearable: true }
|
props: {
|
||||||
|
placeholder: "用户名",
|
||||||
|
clearable: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "phone",
|
field: "phone",
|
||||||
itemRender: {
|
itemRender: {
|
||||||
name: "$input",
|
name: "$input",
|
||||||
props: { placeholder: "手机号", clearable: true }
|
props: {
|
||||||
|
placeholder: "手机号",
|
||||||
|
clearable: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -55,10 +61,17 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
name: "$buttons",
|
name: "$buttons",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
props: { type: "submit", content: "查询", status: "primary" }
|
props: {
|
||||||
|
type: "submit",
|
||||||
|
content: "查询",
|
||||||
|
status: "primary"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
props: { type: "reset", content: "重置" }
|
props: {
|
||||||
|
type: "reset",
|
||||||
|
content: "重置"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -69,7 +82,9 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
toolbarConfig: {
|
toolbarConfig: {
|
||||||
refresh: true,
|
refresh: true,
|
||||||
custom: true,
|
custom: true,
|
||||||
slots: { buttons: "toolbar-btns" }
|
slots: {
|
||||||
|
buttons: "toolbar-btns"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/** 自定义列配置项 */
|
/** 自定义列配置项 */
|
||||||
customConfig: {
|
customConfig: {
|
||||||
@ -114,7 +129,9 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
width: "150px",
|
width: "150px",
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
showOverflow: false,
|
showOverflow: false,
|
||||||
slots: { default: "row-operate" }
|
slots: {
|
||||||
|
default: "row-operate"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
/** 数据代理配置项(基于 Promise API) */
|
/** 数据代理配置项(基于 Promise API) */
|
||||||
@ -135,7 +152,7 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
let total = 0
|
let total = 0
|
||||||
let result: RowMeta[] = []
|
let result: RowMeta[] = []
|
||||||
/** 加载数据 */
|
// 加载数据
|
||||||
const callback = (res: TableResponseData) => {
|
const callback = (res: TableResponseData) => {
|
||||||
if (res?.data) {
|
if (res?.data) {
|
||||||
// 总数
|
// 总数
|
||||||
@ -147,8 +164,7 @@ const xGridOpt: VxeGridProps = reactive({
|
|||||||
// 返回值有格式要求,详情见 vxe-table 官方文档
|
// 返回值有格式要求,详情见 vxe-table 官方文档
|
||||||
resolve({ total, result })
|
resolve({ total, result })
|
||||||
}
|
}
|
||||||
|
// 接口需要的参数
|
||||||
/** 接口需要的参数 */
|
|
||||||
const params = {
|
const params = {
|
||||||
username: form.username || undefined,
|
username: form.username || undefined,
|
||||||
phone: form.phone || undefined,
|
phone: form.phone || undefined,
|
||||||
@ -196,22 +212,45 @@ const xFormOpt: VxeFormProps = reactive({
|
|||||||
{
|
{
|
||||||
field: "username",
|
field: "username",
|
||||||
title: "用户名",
|
title: "用户名",
|
||||||
itemRender: { name: "$input", props: { placeholder: "请输入" } }
|
itemRender: {
|
||||||
|
name: "$input",
|
||||||
|
props: {
|
||||||
|
placeholder: "请输入"
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "password",
|
field: "password",
|
||||||
title: "密码",
|
title: "密码",
|
||||||
itemRender: { name: "$input", props: { placeholder: "请输入" } }
|
itemRender: {
|
||||||
|
name: "$input",
|
||||||
|
props: {
|
||||||
|
placeholder: "请输入"
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
align: "right",
|
align: "right",
|
||||||
itemRender: {
|
itemRender: {
|
||||||
name: "$buttons",
|
name: "$buttons",
|
||||||
children: [
|
children: [
|
||||||
{ props: { content: "取消" }, events: { click: () => xModalDom.value?.close() } },
|
|
||||||
{
|
{
|
||||||
props: { type: "submit", content: "确定", status: "primary" },
|
props: {
|
||||||
events: { click: () => crudStore.onSubmitForm() }
|
content: "取消"
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
click: () => xModalDom.value?.close()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
type: "submit",
|
||||||
|
content: "确定",
|
||||||
|
status: "primary"
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
click: () => crudStore.onSubmitForm()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user