@vue-curd/curd-form

2.0.0 • Public • Published

@vue-curd/curd-form

Usage


```vue
<template>
  <CurdForm v-model="formModel" :form-schema="formSchema">
    <template v-slot:custom="scope">
      <el-table
        :data="[
          { id: 1, spec: '高级', size: '大' },
          { id: 2, spec: '高级', size: '大' },
          { id: 3, spec: '高级', size: '大' },
        ]"
      >
        <el-table-column label="">
          <template v-slot:default>
            <el-radio>{{ "" }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec"></el-table-column>
        <el-table-column label="大小" prop="size"></el-table-column>
      </el-table>
    </template>
    <template v-slot:operate-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </CurdForm>
</template>

<script setup>
import { ref } from "vue"
const formModel = ref({})
const asyncOptions = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { label: "全部", value: "" },
        { label: "伙伴", value: "伙伴" },
        { label: "直客", value: "直客" },
      ])
    }, 1000)
  })
}
const formSchema = ref({
  formItem: [
    { prop: "name", label: "客户名称", tooltip: "这里是客户名称提示" },
    { prop: "no", label: "客户编号" },
    {
      prop: "type",
      label: "客户类型",
      type: "select",
      options: [
        { label: "伙伴", value: "伙伴" },
        { label: "直客", value: "直客" },
      ],
      value: "伙伴",
    },
    {
      prop: "cert",
      label: "伙伴资质",
      type: "select",
      asyncOptions,
    },
    {
      prop: "productType11",
      label: "商品类型",
      type: "radio",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      value: "直售",
    },
    {
      prop: "productType",
      label: "商品类型",
      type: "radio",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      props: {
        showType: "single",
      },
      value: "直售",
    },
    {
      prop: "productType1",
      label: "商品类型",
      type: "radio",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      props: {
        componentName: "radio",
      },
      value: "直售",
    },
    {
      prop: "proType1",
      label: "类型多选",
      type: "checkbox",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      value: ["直售"],
    },
    {
      prop: "proType2",
      label: "类型多选",
      type: "checkbox",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      props: {
        showType: "single",
      },
      value: ["直售"],
    },
    {
      prop: "proType",
      label: "类型",
      type: "checkbox",
      options: [
        { label: "直售", value: "直售" },
        { label: "寄售", value: "寄售" },
        { label: "转售", value: "转售" },
      ],
      props: {
        componentName: "checkbox",
      },
      value: ["直售"],
    },
    {
      prop: "table",
      label: "自定义表单项",
      type: "custom",
    },
  ],
  labelWidth: "110px",
  rules: {
    name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
  },
})
const submit = () => {
  console.log(formModel.value)
}
</script>

Package Sidebar

Install

npm i @vue-curd/curd-form

Weekly Downloads

4

Version

2.0.0

License

ISC

Unpacked Size

71.3 kB

Total Files

31

Last publish

Collaborators

  • tuchongyang