1. 设置组件input 状态不可编辑
设置组件input 状态不可编辑
在component的props添加 disabled: true
<script lang="ts" name="sg-domain" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
const { service } = useCool();
const Upsert = useUpsert({
items: [
{
label: "会员",
prop: "uid",
required: true,
component: { name: "el-select", options: [] }
},
{
label: "订单号",
prop: "unique",
span: 12,
required: true,
component: {
name: "el-input",
props: {
disabled: true,//不可编辑
}
}
},
],
});
</script>
效果:
2.不同字段,三级联动
<script lang="ts" name="sg-chat_count" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
const { service } = useCool();
const addressList = [
{
label: "广东省",
value: "1",
children: [
{
label: "广州市",
value: "101",
children: [
{ label: "越秀", value: "1001" },
{ label: "天河", value: "1002" },
{ label: "萝岗", value: "1003" }
]
},
{
label: "深圳市",
value: "102",
children: [
{ label: "宝安", value: "1004" },
{ label: "龙岗", value: "1005" },
{ label: "罗湖", value: "1006" }
]
},
{
label: "茂名市",
value: "103",
children: [
{ label: "高州", value: "1007" },
{ label: "化州", value: "1008" },
{ label: "信宜", value: "1009" }
]
}
]
},
{
label: "河南省",
value: "2",
children: [
{
label: "郑州市",
value: "104",
children: [
{ label: "中原区", value: "1010" },
{ label: "二七区", value: "1011" },
{ label: "金水区", value: "1012" }
]
},
{
label: "开封市",
value: "105",
children: [
{ label: "龙亭区", value: "1013" },
{ label: "鼓楼区", value: "1014" },
{ label: "祥符区", value: "1015" }
]
},
{
label: "洛阳市",
value: "106",
children: [
{ label: "老城区", value: "1016" },
{ label: "西工区", value: "1017" },
{ label: "涧西区", value: "1018" }
]
}
]
}
];
let address: any[] = [];
const filterList = (level: number, status: string) => {
let resList;
switch (level) {
case 1:
address[0] = status;
address = address.slice(0, 1); //移除二级和三级
Upsert.value?.setForm("two", ""); //清空表单值,有更好的写法,这里应该给二级的一个默认值,默认是当前一级下二级第一个值
Upsert.value?.setForm("three", ""); //清空表单值,有更好的写法,这里应该给三级的一个默认值,默认是当前二级下三级第一个值
resList = addressList.filter((item: any) => item.value == status)[0].children;
break;
case 2:
address[1] = status;
address = address.slice(0, 2); //移除三级
Upsert.value?.setForm("three", ""); //清空表单值,有更好的写法,这里应该给三级的一个默认值,默认是当前二级下三级第一个值
let t2 = addressList.filter((item: any) => item.value == address[0])[0].children;
resList = t2.filter((item: any) => item.value == status)[0].children;
break;
case 3:
address[2] = status;
break;
default:
break;
}
return resList;
};
const change = (level: number, status: string, param?: string) => {
const list: any = filterList(level, status);
if (param) {
Upsert.value?.setOptions(
param,
list.map((e: { label: any; value: any }) => {
return {
label: e.label || "",
value: e.value
};
})
);
}
};
// cl-upsert 配置
const Upsert = useUpsert({
items: [
{
label: "一级",
prop: "one",
span: 8,
required: true,
component: {
name: "el-select",
options: [],
props: {
onChange(status: any) {
change(1, status, "two");
}
}
}
},
{
label: "二级",
prop: "two",
span: 8,
required: true,
component: {
name: "el-select",
options: [],
props: {
onChange(status: any) {
change(2, status, "three");
}
}
}
},
{
label: "三级",
prop: "three",
span: 8,
required: true,
component: {
name: "el-select",
options: [],
props: {
onChange(status: any) {
change(3, status);
}
}
}
},
{
label: "会员账号",
prop: "uid",
span: 12,
required: true,
component: { name: "el-select", options: [] }
},
{
label: "状态",
prop: "status",
value: 1,
component: {
name: "el-radio-group",
options: [
{
label: "正常",
value: 1
},
{
label: "禁用",
value: 0
}
]
}
}
],
async onOpen() {
//打开一级默认数据
Upsert.value?.setOptions(
"one",
addressList.map((e: { label: any; value: any }) => {
return {
label: e.label || "",
value: e.value
};
})
);
}
});
</script>
效果