Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1
2	3	4	5	6	7	8

Crud

Crud is a multifunctional business component based on Table Form and Descriptions

Tip

It is best to familiarize yourself with these components Table Form Descriptions before using them

Use

Basic Use

When columns is bound to a reactive array, changes in the array will affect Crud changes (dynamic Crud). If you don’t need a dynamic Crud, it is recommended to bind an ordinary array.

Set add edit form hide search detail in columns attribute will automatic generate crud

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = [
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        edit: true,
        search: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        add: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        add: true,
        edit: true,
        detail: true,
      },
    ]
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = (done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    }

    const search = (done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

    const submit = (close, done, type, isValid, invalidFields) => {
      ElMessage(`submit: ${type}, ${isValid}`)
      console.log('submit', form.value, type, isValid, invalidFields)
      setTimeout(() => {
        isValid ? close() : done()
      }, 1000)
    }

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      detail,
      data,
      columns,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

Intellisense

Use the defineCrudColumns defineCrudMenuColumns defineCrudBeforeOpen defineCrudBeforeClose defineCrudSearch defineCrudSubmit to make it easier to define columns

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        edit: true,
        search: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        add: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        add: true,
        edit: true,
        detail: true,
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

Nested value

Support for get or set the objects or arrays with nested structures value, only need to configure the prop

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudBeforeOpen,
  defineCrudSubmit,
  defineCrudSearch,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({ 'a.b': undefined })
    const serachForm = ref({ 'a.b': undefined })
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Break',
        prop: 'a.b',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Object',
        prop: 'a.b.c',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Array',
        prop: 'b[0]',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
    ])
    const data = [
      {
        'a.b': 'break nested value',
        a: { b: { c: 'nested value c' } },
        b: ['nested value in array'],
      },
    ]

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      } else {
        form.value = { 'a.b': undefined }
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      data,
      detail,
      columns,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

By default, the add, edit, and delete buttons are not displayed, you need to config through the menu or use menu slot to display

Menu can also be configured through Localization

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="menu"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @search-reset="reset"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudMenuColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const menu = defineCrudMenuColumns({
      label: 'Operations',
      addText: 'New',
      detailText: 'View Row',
      editText: 'Edit Row',
      delText: 'Remove',
      searchText: 'Search',
      searchResetText: 'Reset Search',
      submitText: 'Create',
      resetText: 'Reset Form',
      detail: (row) => row.date !== '2016-05-02',
      edit: (row) => row.date !== '2016-05-03',
      del: (row) => row.date !== '2016-05-04',
      searchReset: false,
      detailProps: { type: 'success', plain: true },
      editProps: { type: 'default', plain: true },
      delProps: { type: 'info', plain: true },
    })
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        form: true,
        detail: true,
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      ElMessage('reset')
      console.log('reset')
    }

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      menu,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

Custom Search

Set search-columns attribute to enable custom Search, same as Form columns

No Data

<template>
  <pro-crud
    v-model:search="serachForm"
    :columns="columns"
    :search-columns="searchColumns"
    @search="search"
    @search-reset="reset"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSearch,
  defineFormColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const serachForm = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const searchColumns = defineFormColumns([
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: 'start',
          endPlaceholder: 'end',
        },
      },
    ])

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const reset = () => {
      ElMessage('reset search')
      console.log('reset search')
    }

    return {
      serachForm,
      columns,
      searchColumns,
      search,
      reset,
    }
  },
})
</script>

Custom Add Form

Set add-columns attribute to enable custom Add Form, same as Form columns

No Data

<template>
  <pro-crud
    v-model="form"
    :columns="columns"
    :add-columns="addColumns"
    :menu="true"
    label-width="100px"
    @submit="submit"
    @reset="reset"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineFormColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const addColumns = defineFormColumns([
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: 'start',
          endPlaceholder: 'end',
        },
      },
    ])

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      ElMessage('reset')
      console.log('reset')
    }

    return {
      form,
      columns,
      addColumns,
      submit,
      reset,
    }
  },
})
</script>

Custom Edit Form

Set edit-columns attribute to enable custom Edit Form, same as Form columns

<template>
  <pro-crud
    v-model="form"
    :columns="columns"
    :edit-columns="editColumns"
    :menu="true"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineFormColumns,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        add: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        detail: true,
      },
    ])
    const editColumns = defineFormColumns([
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: 'start',
          endPlaceholder: 'end',
        },
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      ElMessage('reset')
      console.log('reset')
    }

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      columns,
      detail,
      editColumns,
      data,
      beforeOpen,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

Custom Form

Set form-columns attribute to enable custom Form, same as Form columns. It will act on both add and edit form

<template>
  <pro-crud
    v-model="form"
    :columns="columns"
    :form-columns="formColumns"
    :menu="true"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineFormColumns,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        detail: true,
      },
    ])
    const formColumns = defineFormColumns([
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'datetimerange',
          rangeSeparator: '-',
          startPlaceholder: 'start',
          endPlaceholder: 'end',
        },
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = {
          name: row.name,
          date: [],
        }
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      ElMessage('reset')
      console.log('reset')
    }

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      columns,
      formColumns,
      data,
      detail,
      beforeOpen,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

Custom Detail

Set detail-columns attribute to enable custom Detail, same as Descriptions columns

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :detail-columns="detailColumns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
  defineDescriptionsColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
      },
      {
        label: 'Name',
        prop: 'name',
      },
    ])
    const detailColumns = defineDescriptionsColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      detailColumns,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

Custom Table

Set table-columns attribute to enable custom Table, same as Table columns

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :table-columns="tableColumns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineTableColumns,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        detail: true,
      },
    ])
    const tableColumns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      console.log('reset')
    }

    const deleteRow = (row) => {
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      tableColumns,
      data,
      detail,
      beforeOpen,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

Trigger Dialog

Set before-open or before-close attribute to enable perform an operation before Dialog is opened or before Dialog is closed

<template>
  <pro-crud
    v-model="form"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    :before-close="beforeClose"
    label-width="100px"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudBeforeOpen,
  defineCrudBeforeClose,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        detail: true,
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      ElMessage(`beforeOpen: ${type}`)
      console.log('beforeOpen', type, row)
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const beforeClose = defineCrudBeforeClose((done) => {
      ElMessage('beforeClose')
      console.log('beforeClose')
      done()
    })

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      form,
      columns,
      data,
      detail,
      beforeOpen,
      beforeClose,
      deleteRow,
    }
  },
})
</script>

Open Dialog

By using the openDialog method exposed by the component, you can open the dialog

<template>
  <pro-crud
    ref="crudRef"
    v-model="form"
    :columns="columns"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
  >
    <template #menu-right="{ size }">
      <el-button
        :size="size"
        @click="crudRef.openDialog('add')"
      >
        open
      </el-button>
      <el-button
        :size="size"
        @click="crudRef.openDialog('edit', data[0])"
      >
        edit
      </el-button>
      <el-button
        :size="size"
        @click="crudRef.openDialog('detail', data[0])"
      >
        detail
      </el-button>
    </template>
    <template #form-menu-right="{ size }">
      <el-button
        :size="size"
        @click="crudRef.closeDialog()"
      >
        close
      </el-button>
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineCrudColumns, defineCrudBeforeOpen } from 'element-pro-components'

export default defineComponent({
  setup() {
    const crudRef = ref()
    const form = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        detail: true,
      },
    ])
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    return {
      crudRef,
      form,
      columns,
      data,
      detail,
      beforeOpen,
    }
  },
})
</script>

Slots

Use simple render-function by render in columns. or directly add some slot with [prop] in the template.

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    selection
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #menu-left="{ size }">
      <el-button
        :size="size"
        type="primary"
      >
        menu-left
      </el-button>
    </template>
    <template #menu-right="{ size }">
      <el-button
        :size="size"
        type="danger"
      >
        menu-right
      </el-button>
    </template>
    <template #menu="{ size }">
      <el-button
        :size="size"
        type="success"
        link
      >
        More
      </el-button>
    </template>
    <template #search-menu-right="{ size }">
      <el-button
        :size="size"
        type="success"
      >
        search-menu-right
      </el-button>
    </template>
    <template #action>
      <el-button
        :icon="Refresh"
        circle
        style="margin-right: 8px"
      />
      <pro-column-setting v-model="columns" />
    </template>
    <template #dialog-top="{ type }">
      <p style="text-align: center">
        dialog-top {{ type }}
      </p>
    </template>
    <template #dialog-bottom="{ type }">
      <p
        v-if="type === 'detail'"
        style="text-align: center"
      >
        only appears in the detail
      </p>
    </template>
    <template #form-name>
      <span>form slot</span>
    </template>
    <template #detail-name="{ item, size }">
      <el-tag :size="size">
        {{ item?.name }}
      </el-tag>
    </template>
    <template #table-name="{ row, size }">
      <el-tag :size="size">
        {{ row?.name }}
      </el-tag>
    </template>
    <template #table-name-header="{ column }">
      <s>{{ column.label }}</s>
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, h, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Clock, Refresh } from '@element-plus/icons-vue'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = ref(
      defineCrudColumns([
        {
          label: 'Date',
          prop: 'date',
          component: 'el-input',
          add: true,
          edit: true,
          search: true,
          detail: true,
          render: '--',
          props: {
            slots: {
              suffix: () =>
                h('span', { className: 'el-input__icon' }, h(Clock)),
            },
          },
        },
        {
          label: 'Name',
          prop: 'name',
          component: 'el-input',
          add: true,
          search: true,
          detail: true,
        },
        {
          label: 'Address',
          prop: 'address',
          component: 'el-input',
          add: true,
          edit: true,
          render: (row) => h('em', null, row.address),
        },
      ])
    )
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      Refresh,
      form,
      columns,
      serachForm,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

<style>
.el-input__icon {
  width: 14px;
}
</style>

Custom Form Content

Use crud-search crud-form slot to customize form content.

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    selection
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #crud-search="{ props }">
      <pro-form
        v-bind="props"
        :inline="false"
        label-width="100px"
        style="margin-bottom: 18px"
      />
    </template>
    <template #crud-form="{ props }">
      <pro-form
        v-bind="props"
        :inline="true"
      />
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = ref(
      defineCrudColumns([
        {
          label: 'Date',
          prop: 'date',
          component: 'el-input',
          add: true,
          edit: true,
          search: true,
          detail: true,
        },
        {
          label: 'Name',
          prop: 'name',
          component: 'el-input',
          add: true,
          search: true,
          detail: true,
        },
        {
          label: 'Address',
          prop: 'address',
          component: 'el-input',
          add: true,
          edit: true,
        },
      ])
    )
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      Refresh,
      form,
      columns,
      serachForm,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

<style>
.el-input__icon {
  width: 14px;
}
</style>

Custom Table Content

The component defaults to using ProTable to render the list, but for some special cases, using ProTable cannot better display the data. You can customize the list content through the crud-table slot.

qiang

address: No. 189, Grove St, Los Angeles

creation date: 2016-05-03

qiang

address: No. 189, Grove St, Los Angeles

creation date: 2016-05-02

Go to

Total 2

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    selection
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #crud-table="{ showMenu, createTableMenu }">
      <section class="list">
        <div
          v-for="item in data"
          :key="item.name"
          class="item"
        >
          <div class="item-content">
            <el-image
              :src="item.avatar"
              fit="cover"
              class="item-avatar"
            />
            <div class="item-info">
              <p class="name">
                {{ item.name }}
              </p>
              <p>address: {{ item.address }}</p>
              <p>creation date: {{ item.date }}</p>
            </div>
          </div>
          <div class="item-menu">
            <component
              :is="() => createTableMenu({ row: item })"
              v-if="showMenu"
            />
          </div>
        </div>
      </section>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
      />
    </template>
    <template #crud-detail>
      <div class="detail">
        <el-image
          :src="detail.avatar"
          fit="cover"
          class="item-avatar"
        />
        <div class="item-info">
          <p class="name">
            {{ detail.name }}
          </p>
          <p>address: {{ detail.address }}</p>
          <p>creation date: {{ detail.date }}</p>
        </div>
      </div>
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(2)
    const detail = ref({})
    const columns = ref(
      defineCrudColumns([
        {
          label: 'Date',
          prop: 'date',
          component: 'el-input',
          add: true,
          edit: true,
          search: true,
          detail: true,
        },
        {
          label: 'Name',
          prop: 'name',
          component: 'el-input',
          add: true,
          search: true,
          detail: true,
        },
        {
          label: 'Address',
          prop: 'address',
          component: 'el-input',
          add: true,
          edit: true,
        },
      ])
    )
    const data = ref([
      {
        avatar: 'https://avatars.githubusercontent.com/u/23313167?v=4',
        date: '2016-05-03',
        name: 'qiang',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        avatar: 'https://avatars.githubusercontent.com/u/23313167?v=4',
        date: '2016-05-02',
        name: 'qiang',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      Refresh,
      form,
      columns,
      serachForm,
      data,
      currentPage,
      pageSize,
      total,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

<style scoped>
.list {
  margin-top: calc(var(--el-component-size) / 2);
}
.list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--el-component-size) / 2) 0;
}
.list .item .item-content {
  display: flex;
}
.list .item .item-content .item-avatar {
  margin-right: var(--el-component-size);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.item-info p {
  margin: 0;
  padding: 0;
}
.item-info .name {
  font-size: 22px;
  font-weight: bold;
}

.detail {
  display: flex;
  justify-content: center;
}
.detail .item-avatar {
  margin-right: 100px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
</style>

Custom Dialog

The component defaults to using ElDialog as the dialog, you can customize the dialog through the crud-dialog slot

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :column="1"
    :before-open="beforeOpen"
    selection
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  >
    <template #crud-dialog="{ type, props, createDescriptions, createForm }">
      <el-drawer v-bind="props">
        <component
          :is="type === 'detail' ? createDescriptions() : createForm()"
        />
      </el-drawer>
    </template>
  </pro-crud>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = ref(
      defineCrudColumns([
        {
          label: 'Date',
          prop: 'date',
          component: 'el-input',
          add: true,
          edit: true,
          search: true,
          detail: true,
        },
        {
          label: 'Name',
          prop: 'name',
          component: 'el-input',
          add: true,
          search: true,
          detail: true,
        },
        {
          label: 'Address',
          prop: 'address',
          component: 'el-input',
          add: true,
          edit: true,
        },
      ])
    )
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const search = defineCrudSearch((done, isValid, invalidFields) => {
      ElMessage(`search: ${isValid}`)
      console.log('search', serachForm.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const deleteRow = (row) => {
      ElMessage('deleteRow')
      console.log('deleteRow', row)
    }

    return {
      Refresh,
      form,
      columns,
      serachForm,
      data,
      detail,
      beforeOpen,
      search,
      submit,
      deleteRow,
    }
  },
})
</script>

<style>
.el-input__icon {
  width: 14px;
}
</style>

TypeScript

The function defineCrudColumns supports passing in a Generics type to infer the value of prop

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :menu="menu"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @search="search"
    @submit="submit"
    @delete="deleteRow"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudMenuColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'

interface DataItem {
  date: string
  name: string
  address: string
}

const form = ref({})
const serachForm = ref({})
const detail = ref({})
const menu = defineCrudMenuColumns<DataItem>({
  label: 'Operations',
  edit: (row) => row.date !== '2016-05-02',
  del: (row) => row.date !== '2016-05-04',
  searchReset: false,
})
const columns = defineCrudColumns<DataItem>([
  {
    label: 'Date',
    prop: 'date',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
  },
  {
    label: 'Name',
    prop: 'name',
    component: 'el-input',
    add: true,
    search: true,
    detail: true,
  },
  {
    label: 'Address',
    prop: 'address',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
])
const data = ref<DataItem[]>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const beforeOpen = defineCrudBeforeOpen<DataItem>((done, type, row) => {
  if (type === 'edit') {
    form.value = row || {}
  } else if (type === 'detail') {
    detail.value = row || {}
  }
  done()
})

const search = defineCrudSearch((done, isValid, invalidFields) => {
  ElMessage(`search: ${isValid}`)
  console.log('search', serachForm.value, isValid, invalidFields)
  setTimeout(() => {
    done()
  }, 1000)
})

const submit = defineCrudSubmit((close, done, type, isValid, invalidFields) => {
  ElMessage(`submit: ${type}, ${isValid}`)
  console.log('submit', form.value, type, isValid, invalidFields)
  setTimeout(() => {
    isValid ? close() : done()
  }, 1000)
})

const deleteRow = (row: DataItem) => {
  ElMessage('deleteRow')
  console.log('deleteRow', row)
}
</script>

Props

Name	Description	Type	Options	Default
v-model	binding value	object	-	-
v-model:search	binding search value	object	-	-
columns	to generate crud components, reference `columns`	array	-	-
add-columns	to generate add form components, reference `Form columns`	array	-	from `columns`
edit-columns	to generate edit form components, reference `Form columns`	array	-	from `columns`
form-columns	to generate form components, reference `Form columns`	array	-	from `columns`
search-columns	to generate search components, reference `Form columns`	array	-	from `columns`
table-columns	to generate table components, reference `Table columns`	array	-	from `columns`
detail-columns	to generate detail components, reference `Descriptions columns`	array	-	from `columns`
menu	config the menu content, reference `menu`	object	-	-
search-rules	validation rules of search	object	-	-
data	Table data	array	-	-
selection	add a column will display checkbox, reference `columns`	boolean / object	-	false
index	add a column will display index, reference columns	boolean / object	-	false
expand	add a column will display expand icon, reference columns	boolean / object	-	false
menu	config the menu content, reference columns	boolean / object	-	false
show-overflow-tooltip	whether to hide extra content and show them in a tooltip when hovering on the cell	boolean	-	false
align	alignment	string	left / center / right	left
header-align	alignment of the table header. If omitted, the value of the above `align` attribute will be applied	string	left / center / right	same with align
height	Table’s height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element’s style.height, the height is affected by external styles	string / number	-	-
max-height	Table’s max-height. The legal value is a number or the height in px.	string/number	-	-
stripe	whether Table is striped	boolean	-	false
border	whether Table has vertical border	boolean	-	false
size	size of Table	string	large / default /small	-
fit	whether width of column automatically fits its container	boolean	-	true
show-header	whether Table header is visible	boolean	-	true
highlight-current-row	whether current row is highlighted	boolean	-	false
current-row-key	key of current row, a set only prop	string / number	-	-
row-class-name	function that returns custom class names for a row, or a string assigning class names for every row	Function({row, rowIndex}) / string	-	-
row-style	function that returns custom style for a row, or an object assigning custom style for every row	Function({row, rowIndex}) / Object	-	-
cell-class-name	function that returns custom class names for a cell, or a string assigning class names for every cell	Function({row, column, rowIndex, columnIndex}) / string	-	-
cell-style	function that returns custom style for a cell, or an object assigning custom style for every cell	Function({row, column, rowIndex, columnIndex}) / Object	-	-
header-row-class-name	function that returns custom class names for a row in table header, or a string assigning class names for every row in table header	Function({row, rowIndex}) / string	-	-
header-row-style	function that returns custom style for a row in table header, or an object assigning custom style for every row in table header	Function({row, rowIndex}) / Object	-	-
header-cell-class-name	function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header	Function({row, column, rowIndex, columnIndex}) / string	-	-
header-cell-style	function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header	Function({row, column, rowIndex, columnIndex}) / Object	-	-
row-key	key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used.	Function(row) / string	-	-
empty-text	Displayed text when data is empty. You can customize this area with `#empty`	string	-	No Data
default-expand-all	whether expand all rows by default, works when the table has a column type=“expand” or contains tree structure data	boolean	-	false
expand-row-keys	set expanded rows by this prop, prop’s value is the keys of expand rows, you should set row-key before using this prop	Array	-
default-sort	set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order	Object	`order`: ascending, descending	if `prop` is set, and `order` is not set, then `order` is default to ascending
tooltip-effect	tooltip `effect` property	string	dark / light	dark
show-summary	whether to display a summary row	boolean	-	false
sum-text	displayed text for the first column of summary row	string	-	Sum
summary-method	custom summary method	Function({ columns, data })	-	-
span-method	method that returns rowspan and colspan	Function({ row, column, rowIndex, columnIndex })	-	-
select-on-indeterminate	controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.	boolean	-	true
indent	horizontal indentation of tree data	number	-	16
lazy	whether to lazy loading data	boolean	-	-
load	method for loading child row data, only works when `lazy` is true	Function(row, treeNode, resolve)	-	-
tree-props	configuration for rendering nested data	Object	-	{ hasChildren: ‘hasChildren’, children: ‘children’ }
table-layout	sets the algorithm used to lay out table cells, rows, and columns	string	fixed / auto	fixed
scrollbar-always-on	always show scrollbar	boolean	—	false
flexible	ensure main axis minimum-size doesn’t follow the content	boolean	—	false
v-model:current-page	current page number	number	-	-
v-model:page-size	item count of each page	number	-	-
total	total item count	number	-	-
page-count	total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required	number	-	-
small	whether to use small pagination	boolean	-	false
background	whether the buttons have a background color	boolean	-	false
default-page-size	default initial value of page size	number	-	-
pager-count	number of pagers. Pagination collapses when the total page count exceeds this value	number	odd number between 5 and 21	7
default-current-page	default initial value of current-page	number	-	-
layout	layout of Pagination, elements separated with a comma	string	`sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot`	‘prev, pager, next, jumper, ->, total’
page-sizes	options of item count per page	number[]	-	[10, 20, 30, 40, 50, 100]
popper-class	custom class name for the page size Select’s dropdown	string	-	-
prev-text	text for the prev button	string	-	-
next-text	text for the next button	string	-	-
disabled	whether Pagination is disabled	boolean	-	false
hide-on-single-page	whether to hide when there’s only one page	boolean	-	-
rules	validation rules of form	object	-	-
inline	whether the form is inline	boolean	-	false
array	whether the form is ArrayForm	boolean		-
max	limit the maximum number of ArrayForm component	number	-	-
label-position	position of label. If set to ‘left’ or ‘right’, `label-width` prop is also required	string	right / left / top	right
label-width	width of label, e.g. ‘50px’. All its direct child form items will inherit this value. Width `auto` is supported.	string	-	-
label-suffix	suffix of the label	string	-	-
hide-required-asterisk	whether required fields should have a red asterisk (star) beside their labels	boolean	-	false
show-message	whether to show the error message	boolean	-	true
inline-message	whether to display the error message inline with the form item	boolean	-	false
status-icon	whether to display an icon indicating the validation result	boolean	-	false
validate-on-rule-change	whether to trigger validation when the `rules` prop is changed	boolean	-	true
size	control the size of components in this form	string	large / default /small	-
disabled	whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components’ `disabled` prop	boolean	-	false
gutter	grid spacing	number	-	0
justify	horizontal alignment of flex layout	string	start / end / center / space-around / space-between / spacing-evenly	start
title	title of Dialog. Can also be passed with a named slot (see the following table)	string	-	reference `addText` or `editText` of menu
width	width of Dialog	string / number	-	50%
fullscreen	whether the Dialog takes up full screen	boolean	-	false
top	value for `margin-top` of Dialog CSS	string	-	15vh
modal	whether a mask is displayed	boolean	-	true
append-to-body	whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`	boolean	-	false
lock-scroll	whether scroll of body is disabled while Dialog is displayed	boolean	-	true
open-delay	Time(milliseconds) before open	number	-	0
close-delay	Time(milliseconds) before close	number	-	0
close-on-click-modal	whether the Dialog can be closed by clicking the mask	boolean	-	true
close-on-press-escape	whether the Dialog can be closed by pressing ESC	boolean	-	true
show-close	whether to show a close button	boolean	-	true
before-open	callback before Dialog opened, and it will prevent Dialog from	Function(done, type, row)	-	-
before-close	callback before Dialog closes, and it will prevent Dialog from closing	Function(done)	-	-
center	whether to align the header and footer in center	boolean	-	false
detail	detail data of display	object	-	-
border	with or without border	boolean	-	false
column	numbers of `Descriptions Item` in one line	number	-	3
direction	direction of list	string	vertical / horizontal	horizontal
size	size of list	string	large / default /small	-
title	title text, display on the top left	string	-	-
extra	extra text, display on the top right	string	-	-
align	column content alignment (If no `border`, effective for both label and content)	string	left / center / right	left
label-align	column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)	string	left / center / right	-

Tip

Crud supports all props of Table and Form. It also supports event props other than the title in the Descriptions, If you want to configure the title, please implement it through the descriptions-title slot. It also supports event props other than the modelValue destroy-on-close in the ElDialog, but it is not recommended to modify title and width.

In addition, some props have the same name, and the configuration will be passed to the required component.

columns

Name	Description	Type	Options	Default
add	whether displayed in add form	boolean	-	false
edit	whether displayed in edit form	boolean	-	false
form	whether displayed in form	boolean	-	false
search	whether displayed in search	boolean	-	false
detail	whether displayed in detail	boolean	-	false
hide	whether hide in table	boolean	-	false
prop	the key of data	string	-	-
label	column label	string	-	-
slot	whether to enable slot	boolean	-	false
render	render function for table columns	string / Function(row)	-	-
children	grouping table head	array	-	-
columnKey	column’s key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered	string	-	-
width	column width	string	-	-
minWidth	column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion	string	-	-
fixed	whether column is fixed at left/right. Will be fixed at left if `true`	string / boolean	true / left / right	-
renderHeader	render function for table header of this column	Function(h, { column, $index })	-	-
sortable	whether column can be sorted. Remote sorting can be done by setting this attribute to ‘custom’ and listening to the `sort-change` event of Table	boolean / string	true / false / ‘custom’	false
sortMethod	sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort	Function(a, b)	-	-
sortBy	specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal	string / array / Function(row, index)	-	-
sortOrders	the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array	array	the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order)	[‘ascending’, ‘descending’, null]
resizable	whether column width can be resized, works when `border` of `el-table` is `true`	boolean	-	true
formatter	function that formats cell content	Function(row, column, cellValue, index)	-	-
showOverflowTooltip	whether to hide extra content and show them in a tooltip when hovering on the cell	boolean	-	false
align	alignment	string	left / center / right	left
headerAlign	alignment of the table header. If omitted, the value of the above `align` attribute will be applied	string	left / center / right	same with align
className	class name of cells in the column	string	-	-
labelClassName	class name of the label of this column	string	-	-
filters	an array of data filtering options. For each element in this array, `text` and `value` are required	Array[{ text, value }]	-	-
filterPlacement	placement for the filter dropdown	string	top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end	-
filterMultiple	whether data filtering supports multiple options	boolean	-	true
filterMethod	data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`	Function(value, row, column)	-	-
filteredValue	filter value for selected data, might be useful when table header is rendered with `render-header`	array	-	-
index	customize indices for each row, works on columns with `type=index`	Function(index) / number	-	-
selectable	function that determines if a certain row can be selected, works when `type` is ‘selection’	Function(row, index)	-	-
reserveSelection	whether to reserve selection after data refreshing, works when `type` is ‘selection’. Note that `row-key` is required for this to work	boolean	-	false
type	type of children internal forms	string	array / group / tabs / collapse / steps	array
max	limit the maximum number of sub-columns	number	-	-
show	whether to show the current component	boolean	-	true
labelWidth	width of label, e.g. ‘50px’. Width `auto` is supported.	string	-	-
required	whether the field is required or not, will be determined by validation rules if omitted	boolean	-	false
rules	validation rules of form	object	-	-
error	field error message, set its value and the field will validate error and show this message immediately	string	-	-
showMessage	whether to show the error message	boolean	-	true
inlineMessage	inline style validate message	boolean	-	false
size	control the size of components in this form-item	string	large / default /small	-
span	number of column the grid spans	number	-	24
offset	number of spacing on the left side of the grid	number	-	0
push	number of columns that grid moves to the right	number	-	0
pull	number of columns that grid moves to the left	number	-	0
xs	`<768px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	-	-
sm	`≥768px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	-	-
md	`≥992px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	-	-
lg	`≥1200px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	-	-
xl	`≥1920px` Responsive columns or column props object	number / object (e.g. {span: 4, offset: 4})	-	-
disabled	whether Tab is disabled, work on `type=tabs` or `type=collapse`	boolean	—	false
closable	whether Tab is closable, work on `type=tabs`	boolean	—	false
lazy	whether Tab is lazily rendered, work on `type=tabs`	boolean	—	false
description	step description, work on `type=steps`	string	—	—
icon	step custom icon, work on `type=steps`	string / Component	—	—
status	current status, work on `type=steps`	string	wait / process / finish / error / success	—
detailSpan	colspan of descriptions column	number	-	1
width	descriptions column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)	string / number	-	-
minWidth	descriptions column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)	string / number	-	-
align	descriptions column content alignment (If no `border`, effective for both label and content)	string	left / center / right	left
labelAlign	descriptions column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)	string	left / center / right	-
className	descriptions column content custom class name	string	-	-
labelClassName	descriptions column label custom class name	string	-	-
render	render function for descriptions columns	Function(detail)	-	-
renderLabel	render function for Label	Function(column)	-	-

Tip

Crud columns supports all props of Table columns Form columns. It also supports event props other than the span in the Descriptions columns, The span needs to be rewritten as detailSpan to use

In addition, some props have the same name, and the configuration will be passed to the required component.

Name	Description	Type	Default
add	whether to display a add button	boolean	true
addText	the text of add button	string	Add
addProps	the props of add button, reference `el-button`	object	{ type: ‘primary’ }
edit	whether to display a edit button	boolean / Function(row)	true
editText	the text of edit button	string	Edit
editProps	the props of edit button, reference `el-button`	object	{ link: true, type: ‘primary’ }
detail	whether to display a detail button	boolean / Function(row)	true
detailText	the text of detail button	string	View
detailProps	the props of detail button, reference `el-button`	object	{ link: true, type: ‘info’ }
del	whether to display a del button	boolean / Function(row)	true
delText	the text of del button	string	Delete
delProps	the props of del button, reference `el-button`	object	{ link: true, type: ‘danger’ }
submit	whether to display a submit button	boolean	true
submitText	the text of submit button	string	Submit
submitProps	the props of submit buttonbutton, reference `el-button`	object	{ type: ‘primary’ }
reset	Whether to display a reset button	boolean	true
resetText	the text of reset button	string	Reset
resetProps	the props of reset buttonbutton, reference `el-button`	object	-
prevText	the text of prev button	string	Prev
prevProps	the props of prev button, reference `el-button`	object	-
nextText	the text of next button	string	Next
nextProps	the props of next button, reference `el-button`	object	-
search	whether to display a search button	boolean	true
searchText	the text of search button	string	Search
searchProps	the props of search , reference `el-button`	object	{ type: ‘primary’ }
searchReset	whether to display a reset button	boolean	true
searchResetText	the text of reset button	string	Reset
searchResetProps	the props of reset button, reference `el-button`	object	-
searchPrevText	the text of prev button	string	Prev
searchPrevProps	the props of prev button, reference `el-button`	object	-
searchNextText	the text of next button	string	Next
searchNextProps	the props of next button, reference `el-button`	object	-

Tip

Other attributes are the same as Table columns

Events

Name	Description	Parameters
submit	triggers when the submit click	close, done, ‘add’/‘edit’, isValid, invalidFields
reset	triggers when the reset click	-
add-item	triggers when the add click in the form	indexes: number[]
remove-item	triggers when the remove click in the form	indexes: number[]
collapse-change	triggers when the collapse change in the form	active: CollapseModelValue
tab-change	triggers when the tab change in the form	name: TabPaneName
step-change	triggers when the step change in the form	active: string \| number
add	triggers when the add click	-
edit	triggers when the edit click	row
detail	triggers when the detail click	row
delete	triggers when the delete click	row
search	triggers when the search click	done, isValid, invalidFields
searchReset	triggers when the search reset click	-
add-item	triggers when the add click in the search form	indexes: number[]
remove-item	triggers when the remove click in the search form	indexes: number[]
collapse-change	triggers when the collapse change in the search form	active: CollapseModelValue
tab-change	triggers when the tab change in the search form	name: TabPaneName
step-change	triggers when the step change in the search form	active: string \| number
select	triggers when user clicks the checkbox in a row	selection, row
select-all	triggers when user clicks the checkbox in table header	selection
selection-change	triggers when selection changes	selection
cell-mouse-enter	triggers when hovering into a cell	row, column, cell, event
cell-mouse-leave	triggers when hovering out of a cell	row, column, cell, event
cell-click	triggers when clicking a cell	row, column, cell, event
cell-dblclick	triggers when double clicking a cell	row, column, cell, event
row-click	triggers when clicking a row	row, column, event
row-contextmenu	triggers when user right clicks on a row	row, column, event
row-dblclick	triggers when double clicking a row	row, column, event
header-click	triggers when clicking a column header	column, event
header-contextmenu	triggers when user right clicks on a column header	column, event
sort-change	triggers when Table’s sorting changes	{ column, prop, order }
filter-change	column’s key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered	filters
current-change	triggers when current row changes	currentRow, oldCurrentRow
header-dragend	triggers after changing a column’s width by dragging the column header’s border	newWidth, oldWidth, column, event
expand-change	triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)	row, (expandedRows \| expanded)
validate	triggers after a form item is validated	prop name of the form item being validated, whether validation is passed and the error message if not

Methods

Name	Description	Parameters
clearSelection	used in multiple selection Table, clear user selection	-
toggleRowSelection	used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected	row, selected
toggleAllSelection	used in multiple selection Table, toggle select all and deselect all	-
toggleRowExpansion	used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed	row, expanded
setCurrentRow	used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.	row
clearSort	clear sorting, restore data to the original order	-
clearFilter	clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters	columnKeys
doLayout	refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout	-
sort	sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order	prop: string, order: string
validate	validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted	Function(callback: Function(boolean, object))
validateField	validate one or several form items	Function(props: string \| array, callback: Function(errorMessage: string))
resetFields	reset all the fields and remove validation result	-
scrollToField	Scroll to the specified form field	Function(prop: string)
clearValidate	clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields’ validation messages will be cleared	Function(props: string \| array)
openDialog	open dialog	Function(type: ICrudDialogType, row?: UnknownObject)
closeDialog	close dialog	-

Slots

Name	Description	Type
crud-table	custom Table content	{ props, size, columns, menu, showMenu, createTableMenu }
crud-dialog	custom dialog	{ props, type, createForm, createDescriptions }
crud-search	custom search content	{ props, columns, menu }
crud-form	custom form content	{ props, columns, menu }
crud-detail	custom detail content	{ props, columns, size }
menu-left	control the menu left display content	{ size }
menu-right	control the menu right display content	{ size }
action	control the menu right of the menu display content	{ size }
menu	control the menu display content of table	{ size, row, column, $index }
dialog-top	control the top display content of dialog	{ type }
dialog-bottom	control the bottom display content of dialog	{ type }
table	anything inserted before the menu of table	-
table-expand	control the expand display content, parameters	{ row, column, $index }
table-append	Contents to be inserted after the last row	-
table-[prop]	control the `Item` display content of table	{ row, column, $index }
table-[prop]-header	control the `Item` header display content of table	{ column, $index }
form	anything inserted before the menu of form	-
form-menu-left	control the menu left display content of form	{ loading: boolean }
form-menu-right	control the menu right display content of form	{ loading: boolean }
form-[prop]	control the `Item` display content of form	{ item: object, indexes?: number[], value: any, setValue: (value: any) => void }
form-[prop]-label	control the `Item` label display content of form	{ item: object, indexes?: number[] }
form-[prop]-error	control the `Item` error display content of form	{ error, item: object, indexes?: number[] }
search	anything inserted before the menu of search	-
search-menu-left	control the menu left display content of search	{ loading: boolean }
search-menu-right	control the menu right display content of search	{ loading: boolean }
search-[prop]	control the `Item` display content of search	{ item: object, indexes?: number[], value: any, setValue: (value: any) => void }
search-[prop]-label	control the `Item` label display content of search	{ item: object, indexes?: number[] }
search-[prop]-error	control the `Item` error display content of search	{ error, item: object, indexes?: number[] }
detail	anything inserted after the menu of descriptions	-
detail-title	custom title, display on the top left	{ size }
detail-extra	custom extra area, display on the top right	{ size }
detail-[prop]	control the `Item` display content	{ size, item }
detail-[prop]-label	control the `Item` label display content	{ size, item }

Tip

[prop] the prop of columns

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1
2	3	4	5	6	7	8

Crud #

Use #

Basic Use #

Intellisense #

Nested value #

Custom Menu #

Custom Search #

Custom Add Form #

Custom Edit Form #

Custom Form #

Custom Detail #

Custom Table #

Trigger Dialog #

Open Dialog #

Slots #

Custom Form Content #

Custom Table Content #

Custom Dialog #

TypeScript #

Props #

columns #

menu #

Events #

Methods #

Slots #

Crud

Use

Basic Use

Intellisense

Nested value

Custom Menu

Custom Search

Custom Add Form

Custom Edit Form

Custom Form

Custom Detail

Custom Table

Trigger Dialog

Open Dialog

Slots

Custom Form Content

Custom Table Content

Custom Dialog

TypeScript

Props

columns

menu

Events

Methods

Slots

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1
2	3	4	5	6	7	8