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"
      @before-open="beforeOpen"
      @row-save="addSave"
      @row-update="rowUpdate"
      :on-load="onLoad"
    />
  </div>
</template>

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

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: Function) => {
  ElMessage.success(JSON.stringify(row))
  done()
}


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

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

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

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

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: Function) => {
  ElMessage.success(JSON.stringify(row))
  done()
}


const rowUpdate = (row: any, done: Function) => {
  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"
      @before-open="beforeOpen"
      @row-save="addSave"
      @row-update="rowUpdate"
      :on-load="onLoad"
    />
  </div>
</template>

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

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: Function) => {
  ElMessage.success(JSON.stringify(row))
  done()
}


const rowUpdate = (row: any, done: Function) => {
  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 { onMounted, ref, nextTick } from 'vue'
import { XCrud } from 'cjx-low-code'
import type { TableOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

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 { onMounted, ref, nextTick } from 'vue'
import { XCrud } from 'cjx-low-code'
import type { TableOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

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" >
      <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>

      <template #otherGroupForm>
         1111
      </template>
    </XCrud>
  </div>
</template>

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

const option = ref<TableOption>({
  menu: true,
  menuWidth: 220,
  updateBtn: true,
  viewBtn: true,
  span: 12,
  column: [ 
    {
      label: '姓名',
      prop: 'name',
      search: true
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '地址',
      prop: 'address'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ],
  group: [
    {
      label: '详细信息',
      prop: 'info',
      column: [
        {
          label: '爱好',
          prop: 'hobby',
          type: 'checkbox',
          span: 12,
          dicData: [
            {
              label: '篮球',
              value: '1'
            },
            {
              label: '足球',
              value: '2'
            },
            {
              label: '羽毛球',
              value: '3'
            },
            {
              label: '乒乓球',
              value: '4'
            }
          ]
        },
        {
          label: '职业',
          prop: 'job',
          type: 'radio',
          dicData: [
            {
              label: '教师',
              value: '1'
            },
            {
              label: '医生',
              value: '2'
            },
            {
              label: '工程师',
              value: '3'
            },
            {
              label: '学生',
              value: '4'
            }
          ]
        }
      ]
    },
    {
      label: '其他信息',
      prop: 'other',
    }
  ]
})

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) => {
  console.log(type, row)
  done()

}

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