cjx-low-code

中文

English

中文

English

Appearance

XCrud ​

基础的XCrud的展示用法。 ​

提示

<template>
  <div>
    <XCrud :form="form" :option="option" :data="data" @before-open="beforeOpen" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableOption } from 'cjx-low-code'
const option = ref<TableOption>({
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '男'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '女'
  }
]

const form = ref({})

const beforeOpen: (...args: any[]) => void = (type, row, done) => {
  console.log(type, row)
  done()
}
</script>

有搜索栏和操作栏 ​

姓名
年龄
性别
请选择性别
<template>
  <div>
    <XCrud
      v-model:form="form"
      v-model:search="search"
      :option="option"
      :data="data"
      :on-load="onLoad"
      @before-open="beforeOpen"
      @row-save="addSave"
      @row-update="rowUpdate"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  addBtn: true,
  menu: true,
  viewBtn: true,
  updateBtn: true,
  column: [
    {
      label: '姓名',
      prop: 'name',
      search: true
    },
    {
      label: '年龄',
      prop: 'age',
      search: true,
      searchType: 'input',
      type: 'inputNumber',
      inputNumber: {
        min: 0
      }
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'select',
      search: true,
      dicData: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ]
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '1'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '2'
  }
]

const form = ref({})

const search = ref({})

const beforeOpen: (...args: any[]) => void = (type, row, done) => {
  ElMessage.success(type)
  done()
}

const onLoad = async () => {
  // 模拟异步请求
  await new Promise<void>((resolve) => {
    ElMessage.success(JSON.stringify(search.value))
    setTimeout(() => resolve(), 500)
  })
}

const addSave = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}

const rowUpdate = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}
</script>

有搜索栏和操作栏和分页 ​

姓名
年龄
性别
请选择性别
共 20 条
  • 1
  • 2
前往
页
<template>
  <div>
    <XCrud
      v-model:form="form"
      v-model:search="search"
      v-model:page="page"
      :option="option"
      :data="data"
      :on-load="onLoad"
      @before-open="beforeOpen"
      @row-del="rowDel"
      @row-save="addSave"
      @row-update="rowUpdate"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { CrudPageProps, TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  addBtn: true,
  menu: true,
  viewBtn: true,
  updateBtn: true,
  delBtn: true,
  column: [
    {
      label: '姓名',
      prop: 'name',
      search: true,
      rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
    },
    {
      label: '年龄',
      prop: 'age',
      search: true,
      type: 'inputNumber',
      inputNumber: {
        min: 1
      },
      rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'select',
      search: true,
      dicData: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ]
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '1'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '2'
  }
]

const form = ref({})

const page = ref<CrudPageProps>({
  total: 20,
  pageSize: 10,
  currentPage: 1
})

const search = ref({})

const beforeOpen: (...args: any[]) => void = (type, row, done) => {
  ElMessage.success(type)
  done()
}

const onLoad = async () => {
  // 模拟异步请求
  await new Promise<void>((resolve) => {
    ElMessage.success(JSON.stringify(search.value))
    setTimeout(() => resolve(), 500)
  })
}

const addSave = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}

const rowUpdate = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}

const rowDel = (row: any, _index: number) => {
  ElMessage.success(JSON.stringify(row))
}
</script>

有编辑表格表单的Crud ​

姓名
年龄
性别
请选择性别
<template>
  <div>
    <XCrud
      v-model:form="form"
      v-model:search="search"
      :option="option"
      :data="data"
      :on-load="onLoad"
      @before-open="beforeOpen"
      @row-save="addSave"
      @row-update="rowUpdate"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { XCrud } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
import type { TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  addBtn: true,
  menu: true,
  viewBtn: true,
  updateBtn: true,
  column: [
    {
      label: '姓名',
      prop: 'name',
      search: true
    },
    {
      label: '年龄',
      prop: 'age',
      search: true,
      searchType: 'input',
      type: 'inputNumber',
      inputNumber: {
        min: 0
      }
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'select',
      search: true,
      dicData: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ]
    },
    {
      label: '',
      prop: 'editTable',
      type: 'editTable',
      hide: true,
      span: 24,
      editTable: {
        option: {
          addBtn: true,
          delBtn: true,
          copyBtn: true,
          sortable: true,
          column: [
            {
              label: '姓名',
              prop: 'name',
              type: 'input',
              rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
            },
            {
              label: '年龄',
              prop: 'age',
              type: 'inputNumber',
              inputNumber: {
                min: 1
              },
              rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
            }
          ]
        }
      }
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 28,
    address: '北京市',
    sex: '1',
    editTable: [
      {
        name: '张三的儿子',
        age: 6
      }
    ]
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '2',
    editTable: [
      {
        name: '小红的女儿',
        age: 6
      }
    ]
  }
]

const form = ref({})

const search = ref({})

const beforeOpen: (...args: any[]) => void = (type, row, done) => {
  ElMessage.success(type)
  done()
}

const onLoad = async () => {
  // 模拟异步请求
  await new Promise<void>((resolve) => {
    ElMessage.success(JSON.stringify(search.value))
    setTimeout(() => resolve(), 500)
  })
}

const addSave = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}

const rowUpdate = (row: any, done: () => void) => {
  ElMessage.success(JSON.stringify(row))
  done()
}
</script>

可以单选的Crud ​

<template>
  <div>
    <XCrud ref="crudRef" :form="form" :option="option" :data="data" @radio-change="radioChange" />
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import { XCrud } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
import type { TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  radio: true,
  rowKey: 'id',
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '男',
    id: '1'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '女',
    id: '2'
  },
  {
    name: '小王',
    age: 22,
    address: '广州市',
    sex: '男',
    id: '3'
  },
  {
    name: '小丽',
    age: 24,
    address: '深圳市',
    sex: '女',
    id: '4'
  }
]

const form = ref({})

const crudRef = ref<InstanceType<typeof XCrud>>()

onMounted(async () => {
  await nextTick()
  crudRef.value?.toggleRowRadio('2')
})

const radioChange = (row: any) => {
  ElMessage.success(`选中了${JSON.stringify(row)}`)
}
</script>

可以多选的Crud ​

<template>
  <div>
    <XCrud
      ref="crudRef"
      :form="form"
      :option="option"
      :data="data"
      @selection-change="selectionChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import { XCrud } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
import type { TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  selection: true,
  rowKey: 'id',
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '男',
    id: '1'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '女',
    id: '2'
  },
  {
    name: '小王',
    age: 22,
    address: '广州市',
    sex: '男',
    id: '3'
  },
  {
    name: '小丽',
    age: 24,
    address: '深圳市',
    sex: '女',
    id: '4'
  }
]

const form = ref({})
const crudRef = ref<InstanceType<typeof XCrud>>()

onMounted(async () => {
  await nextTick()
  crudRef.value?.toggleRowSelection(data[1], true)
})

const selectionChange = (data: any) => {
  ElMessage.success(`选中了${JSON.stringify(data)}`)
}
</script>

插槽 ​

姓名
<template>
  <div>
    <XCrud
      v-model:form="form"
      :option="option"
      :data="data"
      @before-open="beforeOpen"
      @row-save="save"
    >
      <template #nameSearch>
        <el-input placeholder="请输入插槽姓名" />
      </template>

      <template #headerMenu>
        <el-button type="primary">自定义按钮headerMenu</el-button>
      </template>

      <template #menu="{ row, $index }">
        <el-button type="primary" link @click="customizeMenuBtn(row, $index)"
          >自定义按钮menu</el-button
        >
      </template>

      <template #name="{ row }">
        <el-tag>{{ row.name }}</el-tag>
      </template>

      <template #nameForm="{ prop, _XBoxType }">
        <div v-if="_XBoxType === 'check'">
          <el-tag>{{ form.name }}</el-tag
          >{{ prop }}
        </div>

        <div v-else>
          <el-input v-model="form.name" placeholder="请输入姓名" /> {{ _XBoxType }}
        </div>
      </template>
    </XCrud>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableOption } from 'cjx-low-code'

const option = ref<TableOption>({
  menu: true,
  menuWidth: 220,
  updateBtn: true,
  viewBtn: true,
  addBtn: true,
  span: 12,
  column: [
    {
      label: '姓名',
      prop: 'name',
      search: true
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex'
    },
    {
      label: '时间组件',
      prop: 'obj.objSon.time',
      type: 'datePicker',
      datePicker: {
        type: 'year',
        valueFormat: 'YYYY-MM-DD'
      }
    }
  ],
  formSchemaField: [
    {
      label: '详细信息',
      prop: 'info',
      type: 'group',
      column: [
        {
          label: '爱好',
          prop: 'hobby',
          type: 'checkbox',
          span: 12,
          dicData: [
            {
              label: '篮球',
              value: '1'
            },
            {
              label: '足球',
              value: '2'
            },
            {
              label: '羽毛球',
              value: '3'
            },
            {
              label: '乒乓球',
              value: '4'
            }
          ],
          checkbox: {}
        },

        {
          label: '职业',
          prop: 'job',
          type: 'radio',
          dicData: [
            {
              label: '教师',
              value: '1'
            },
            {
              label: '医生',
              value: '2'
            },
            {
              label: '工程师',
              value: '3'
            },
            {
              label: '学生',
              value: '4'
            }
          ]
        }
      ]
    }
  ]
})

const data = [
  {
    name: '张三',
    age: 18,
    address: '北京市',
    sex: '男',
    hobby: ['2', '4'],
    job: '1'
  },
  {
    name: '小红',
    age: 20,
    address: '上海市',
    sex: '女',
    hobby: ['2'],
    job: '4'
  }
]

const form = ref({
  name: ''
})

const beforeOpen: (...args: any[]) => void = (type, row, done) => {
  done()
}

const customizeMenuBtn = (row: any, $index: number) => {
  ElMessage.success(`自定义按钮menu: row: ${JSON.stringify(row)} $index: ${$index}`)
}

const save = (row: any, done) => {
  ElMessage.success(`保存成功:${JSON.stringify(form.value)}`)
  done()
}
</script>