Crud Table

z-crud component table functionality introduction. Table functionality usage is basically equivalent to z-table.

Table Usage

Encapsulated on z-table, table attributes can be passed directly.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const columns = ref([
  {
    type: 'selection',
    reserveSelection: true,
  },
  {
    label: 'Name',
    prop: 'name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)
const selectionData = ref<RowData[]>([])

function getTableData(params: any) {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    v-model:selectionData="selectionData"
    :columns="columns"
    :request="request"
    :action="false"
    row-key="id"
    stripe
  />
</template>

Table Title

Configure title attribute to generate table title, supports string and function types, can also use tableTitle slot for customization.

<script lang="ts" setup>
import { ref } from 'vue'

const columns = ref([
  {
    label: 'Name',
    prop: 'name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)

function getTableData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    :columns="columns"
    :request="request"
    :action="false"
    title="Table Title"
  />
</template>

Operation Items

Operation items are appended to the end of columns by default, with table header as Operation, having three operations: View, Edit, Delete.

For specific configuration of operations, please refer to Create/Edit Configuration, View Configuration, Delete Configuration documentation.

Supports dynamic control of specific operation visibility.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableFormConfig } from 'ideaz-element'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

interface GetTableDataRes { data: { page: number, pageSize: number, list: RowData[], total: number } }

const columns = ref([
  {
    label: 'Name',
    prop: 'name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref<RowData[]>([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)
const detailConfig = ref<TableFormConfig | boolean>(true)
const deleteConfig = ref<TableFormConfig | boolean>(true)
const editConfig = ref<TableFormConfig | boolean>(true)

function getTableData(params: any): Promise<GetTableDataRes> {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}

function handleChangeViewVisible() {
  detailConfig.value = !detailConfig.value
}

function handleChangeDeleteVisible() {
  deleteConfig.value = !deleteConfig.value
}

function handleChangeEditVisible() {
  editConfig.value = !editConfig.value
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    :columns="columns"
    :request="request"
    :detail="detailConfig"
    :edit="editConfig"
    :delete="deleteConfig"
  >
    <template #toolBarLeft>
      <el-button type="primary" size="small" @click="handleChangeViewVisible">
        Toggle view button
      </el-button>
      <el-button type="primary" size="small" @click="handleChangeDeleteVisible">
        Toggle delete button
      </el-button>
      <el-button type="primary" size="small" @click="handleChangeEditVisible">
        Toggle edit button
      </el-button>
    </template>
  </z-crud>
</template>

Custom Operation Items

Configure action to false to disable default operation items and customize table operations.

Operation buttons also support dynamic attributes, such as: disabled, etc. Pass a method with current row related data as parameter.

<!-- eslint-disable unused-imports/no-unused-vars -->
<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableColumnScopeData } from 'ideaz-element'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const columns = ref([
  {
    label: 'Name',
    prop: 'name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
  {
    type: 'button',
    label: 'Actions',
    buttons: [
      {
        label: 'View',
        link: true,
        type: 'primary',
        disabled: ({ row, column, $index }: TableColumnScopeData<RowData>) => row.name === 'Steven',
        onClick: ({ row }: TableColumnScopeData<RowData>) => console.log(row, 'row'),
      },
      {
        label: 'Delete',
        link: true,
        type: 'danger',
        disabled: ({ row, column, $index }: TableColumnScopeData<RowData>) => row.age === 18,
        onClick: ({ row }: TableColumnScopeData<RowData>) => console.log(row, 'row'),
      },
    ],
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)

function getTableData(params: any) {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    :columns="columns"
    :request="request"
    :action="false"
  />
</template>

For other specific configurations, refer to z-table component

Configure type as dropdown in buttons array, configure dropdown options in children

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableColumnScopeData } from 'ideaz-element'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const columns = ref([
  {
    label: 'Name',
    prop: 'name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
  {
    type: 'button',
    label: 'Actions',
    width: '200px',
    buttons: [
      {
        type: 'primary',
        link: true,
        label: 'Edit',
        onClick: ({ row }: TableColumnScopeData<RowData>) => {
          console.log(row, 'edit')
        },
      },
      {
        type: 'danger',
        link: true,
        label: 'Delete',
        onClick: ({ row }: TableColumnScopeData<RowData>) => {
          console.log(row, 'delete')
        },
      },
      {
        type: 'dropdown',
        reference: 'More',
        children: [
          {
            type: 'primary',
            link: true,
            label: 'Copy',
            onClick: ({ row }: TableColumnScopeData<RowData>) => {
              console.log(row, 'copy')
            },
          },
          {
            type: 'danger',
            link: true,
            label: 'Operate',
            onClick: ({ row }: TableColumnScopeData<RowData>) => {
              console.log(row, 'operate')
            },
          },
        ],
      },
    ],
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)

function getTableData(params: any) {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    :columns="columns"
    :request="request"
    :action="false"
  />
</template>

Pagination

Configure pagination, supports two-way binding to implement pagination effect.

When pageSize is 0, pagination is false or pagination is not passed, pagination will not be displayed.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

interface RowData {
  name: string
  gender: string
  age: number
  time: string
}

interface GetTableDataRes { result: { page: number, pageSize: number, list: RowData[], total: number } }

const loading = ref(false)
const tableData = ref<RowData[]>([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
  layout: 'total, sizes, prev, pager, next, jumper',
})

const columns = ref([
  {
    prop: 'name',
    label: 'Name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

function mockApi(params: any): Promise<GetTableDataRes> {
  console.log(params, 'params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const dataFirstPage = [
        {
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
      ]
      const dataSecondPage = [
        {
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]
      resolve({
        result: {
          page: 1,
          pageSize: 10,
          total: 4,
          list: pagination.value.page === 1 ? dataFirstPage : dataSecondPage,
        },
      })
    }, 100)
  })
}

async function getTableData() {
  loading.value = true
  try {
    const res = await mockApi({ ...pagination.value })
    tableData.value = res.result.list
    pagination.value.total = res.result.total
  }
  catch (error) {
    console.log(error)
  }
  loading.value = false
}

getTableData()
</script>

<template>
  <z-crud
    v-model:pagination="pagination"
    v-model:data="tableData"
    v-model:loading="loading"
    :columns="columns"
    :action="false"
    @refresh="getTableData"
  />
</template>

Frontend Pagination

Configure pagination type as front to enable frontend pagination functionality.

[]

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

interface RowData {
  name: string
  gender: string
  age: number
  time: string
}

interface GetTableDataRes { result: { page: number, pageSize: number, list: RowData[], total: number } }

const loading = ref(false)
const tableData = ref<RowData[]>([])
const totalData = ref<RowData[]>([])
const pagination = ref({
  type: 'front',
  page: 1,
  pageSize: 2,
  total: 0,
  layout: 'total, sizes, prev, pager, next, jumper',
})

const columns = ref([
  {
    prop: 'name',
    label: 'Name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

function mockApi(params: any): Promise<GetTableDataRes> {
  console.log(params, 'params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        result: {
          page: 1,
          pageSize: 10,
          total: 4,
          list: data,
        },
      })
    }, 100)
  })
}

async function getTableData() {
  loading.value = true
  try {
    const res = await mockApi({ ...pagination.value })
    totalData.value = res.result.list
    pagination.value.total = res.result.total
  }
  catch (error) {
    console.log(error)
  }
  loading.value = false
}

getTableData()
</script>

<template>
  {{ tableData }}
  <z-crud
    v-model:pagination="pagination"
    v-model:data="tableData"
    v-model:loading="loading"
    :total-data="totalData"
    :columns="columns"
    :action="false"
    @refresh="getTableData"
  />
</template>

Hide Columns

Configure hide field in column, supports function or boolean value.

<script lang="ts" setup>
import { ref } from 'vue'

const isHide = ref(false)
const tableData = ref([
  {
    name: 'Steven',
    gender: 'male',
    age: 22,
    time: '2020-01-01',
  },
  {
    name: 'Helen',
    gender: 'male',
    age: 12,
    time: '2012-01-01',
  },
  {
    name: 'Nancy',
    gender: 'female',
    age: 18,
    time: '2018-01-01',
  },
  {
    name: 'Jack',
    gender: 'male',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    prop: 'name',
    label: 'Name',
    hide: () => isHide.value,
  },
  {
    prop: 'gender',
    label: 'Gender',
    hide: true,
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

function changeVisible() {
  isHide.value = !isHide.value
}
</script>

<template>
  <el-button @click="changeVisible">
    Toggle column visibility
  </el-button>
  <z-crud
    v-model:data="tableData"
    :columns="columns"
    :action="false"
  />
</template>

Custom Column

Configure slot or render in column items to customize column content.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { h, ref } from 'vue'
import type { TableColumnScopeData } from 'ideaz-element'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const columns = ref([
  {
    label: 'Name',
    slot: 'name',
    form: {
      component: 'input',
      label: 'Name',
      field: 'name',
    },
  },
  {
    slot: 'gender',
    label: 'Gender',
    form: {
      component: 'select',
      label: 'Gender',
      field: 'gender',
    },
  },
  {
    render: ({ row }: TableColumnScopeData<RowData>) => h('span', row.age),
    label: 'Age',
    form: {
      component: 'input',
      label: 'Age',
      field: 'age',
    },
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
const request = ref({
  searchApi: getTableData,
  deleteApi: commonApi,
  submitApi: commonApi,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)
const formData = ref({})

const options = {
  gender: [{ label: 'male', value: 'male' }, { label: 'female', value: 'female' }],
}

function getTableData(params: any) {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}

function commonApi(params: any) {
  console.log(params, 'commonApi params')
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        msg: 'success',
        code: 200,
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:formData="formData"
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    :options="options"
    :columns="columns"
    :request="request"
  >
    <template #name>
      sdf
    </template>
    <template #gender>
      asdf
    </template>
  </z-crud>
</template>

Configure tooltip in column to implement table header tooltip functionality, supports function and string.

<script lang="ts" setup>
import { h, ref } from 'vue'

const tableData = ref([
  {
    name: 'Steven',
    gender: 'male',
    age: 22,
    time: '2020-01-01',
  },
  {
    name: 'Helen',
    gender: 'male',
    age: 12,
    time: '2012-01-01',
  },
  {
    name: 'Nancy',
    gender: 'female',
    age: 18,
    time: '2018-01-01',
  },
  {
    name: 'Jack',
    gender: 'male',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    prop: 'name',
    label: 'Name',
    tooltip: () => h('span', 'Name tooltip'),
  },
  {
    prop: 'gender',
    label: 'Gender',
    tooltip: 'Gender tooltip',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
</script>

<template>
  <z-crud
    v-model:data="tableData"
    :columns="columns"
    :action="false"
  />
</template>

Column Types

Configure type in column to implement table column types, supports expand, radio, selection, input, select.

TIP

When type is sort, type is radio or cross-page selection checkbox is needed, it needs to be used with rowKey (default id).

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  {
    id: 1,
    name: 'Steven',
    gender: '1',
    age: 22,
    time: '2020-01-01',
  },
  {
    id: 2,
    name: 'Helen',
    gender: '1',
    age: 12,
    time: '2012-01-01',
  },
  {
    id: 3,
    name: 'Nancy',
    gender: '2',
    age: 18,
    time: '2018-01-01',
  },
  {
    id: 4,
    name: 'Jack',
    gender: '1',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    type: 'sort',
  },
  {
    type: 'expand',
  },
  {
    type: 'index',
  },
  {
    type: 'radio',
  },
  {
    type: 'selection',
    reserveSelection: true,
  },
  {
    component: 'input',
    prop: 'name',
    label: 'Name',
  },
  {
    component: 'select',
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

const options = {
  gender: [
    { label: 'Male', value: '1' },
    { label: 'Female', value: '2' },
  ],
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    :columns="columns"
    :options="options"
    :action="false"
    row-key="id"
  >
    <template #expand>
      <span>Expanded content</span>
    </template>
  </z-crud>
</template>

Custom Table Header

Configure label in column as string with slot or Slot or configure as render function to implement custom column header.

<script lang="ts" setup>
import { h, ref } from 'vue'

const tableData = ref([
  {
    name: 'Steven',
    gender: 'male',
    age: 22,
    time: '2020-01-01',
  },
  {
    name: 'Helen',
    gender: 'male',
    age: 12,
    time: '2012-01-01',
  },
  {
    name: 'Nancy',
    gender: 'female',
    age: 18,
    time: '2018-01-01',
  },
  {
    name: 'Jack',
    gender: 'male',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    prop: 'name',
    label: () => h('span', 'Custom header'),
  },
  {
    prop: 'gender',
    label: 'genderHeaderSlot',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
</script>

<template>
  <z-crud
    v-model:data="tableData"
    :columns="columns"
    :action="false"
  >
    <template #genderHeaderSlot="scope">
      <span>Custom gender header {{ scope.$index }}</span>
    </template>
  </z-crud>
</template>

Editable Table

For detailed documentation, please refer to z-table editable table content.

Set editable to true to enable table edit mode. This field supports boolean or object type, editable table type defaults to single.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  {
    name: 'Steven',
    gender: '1',
    age: 22,
    time: '2020-01-01',
  },
  {
    name: 'Helen',
    gender: '1',
    age: 12,
    time: '2012-01-01',
  },
  {
    name: 'Nancy',
    gender: '2',
    age: 18,
    time: '2018-01-01',
  },
  {
    name: 'Jack',
    gender: '1',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    component: 'input',
    prop: 'name',
    label: 'Name',
  },
  {
    component: 'select',
    prop: 'gender',
    label: 'Gender',
  },
  {
    component: 'input',
    prop: 'age',
    label: 'Age',
  },
  {
    component: 'el-date-picker',
    prop: 'time',
    label: 'Date',
    fieldProps: {
      valueFormat: 'YYYY-MM-DD',
    },
  },
])

const options = {
  gender: [
    { label: 'Male', value: '1' },
    { label: 'Female', value: '2' },
  ],
}

function handleClick() {
  console.log(tableData.value, 'handleClick')
}
</script>

<template>
  <el-button @click="handleClick">
    click
  </el-button>
  <z-crud
    v-model:data="tableData"
    :columns="columns"
    :options="options"
    :editable="true"
    :action="false"
  />
</template>

Sticky

Implement sticky functionality by configuring sticky attribute's top, parent (DOM element where scroll bar appears) and zIndex. top defaults to 50px, zIndex defaults to 100.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const searchFormData = ref({
  name: '',
})

const columns = ref([
  {
    type: 'selection',
    reserveSelection: true,
  },
  {
    label: 'Name',
    prop: 'name',
    search: {
      component: 'el-input',
    },
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])
const request = ref({
  searchApi: getTableData,
})
const tableData = ref([])
const pagination = ref({
  page: 1,
  pageSize: 2,
  total: 0,
})
const loading = ref(false)
const selectionData = ref<RowData[]>([])

function getTableData(params: any) {
  console.log(params, 'getTableData params')
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: 'Steven',
          gender: 'male',
          age: 22,
          time: '2020-01-01',
        },
        {
          id: 2,
          name: 'Helen',
          gender: 'male',
          age: 12,
          time: '2012-01-01',
        },
        {
          id: 3,
          name: 'Nancy',
          gender: 'female',
          age: 18,
          time: '2018-01-01',
        },
        {
          id: 4,
          name: 'Jack',
          gender: 'male',
          age: 28,
          time: '2028-01-01',
        },
      ]

      resolve({
        data: {
          page: 1,
          pageSize: 2,
          total: 4,
          list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
        },
      })
    }, 100)
  })
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:pagination="pagination"
    v-model:loading="loading"
    v-model:selectionData="selectionData"
    v-model:formData="searchFormData"
    :columns="columns"
    :request="request"
    :action="false"
    :sticky="{ parent: 'document' }"
    row-key="id"
    stripe
  />
</template>

Watermark

Configure watermark, supports string and object types. For object type configurable attributes, refer to el-watermark configuration.

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  {
    name: 'Steven',
    gender: '1',
    age: 22,
    time: '2020-01-01',
  },
  {
    name: 'Helen',
    gender: '1',
    age: 12,
    time: '2012-01-01',
  },
  {
    name: 'Nancy',
    gender: '2',
    age: 18,
    time: '2018-01-01',
  },
  {
    name: 'Jack',
    gender: '1',
    age: 28,
    time: '2028-01-01',
  },
])
const formData = ref({})

const columns = ref([
  {
    prop: 'name',
    label: 'Name',
    form: {
      component: 'input',
      field: 'name',
    },
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

const options = {
  gender: [
    { label: 'Male', value: '1' },
    { label: 'Female', value: '2' },
  ],
}
</script>

<template>
  <z-crud
    v-model:data="tableData"
    v-model:formData="formData"
    :columns="columns"
    :options="options"
    :action="false"
    watermark="watermark"
  />
</template>

Table Methods

z-crud table methods can be used according to el-table.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

interface RowData {
  id: number
  name: string
  gender: string
  age: number
  time: string
}

const zTableRef = ref()
const radioData = ref({})
const selectionData = ref<RowData[]>([])
const tableData = ref([
  {
    id: 1,
    name: 'Steven',
    gender: 'male',
    age: 22,
    time: '2020-01-01',
  },
  {
    id: 2,
    name: 'Helen',
    gender: 'male',
    age: 12,
    time: '2012-01-01',
  },
  {
    id: 3,
    name: 'Nancy',
    gender: 'female',
    age: 18,
    time: '2018-01-01',
  },
  {
    id: 4,
    name: 'Jack',
    gender: 'male',
    age: 28,
    time: '2028-01-01',
  },
])

const columns = ref([
  {
    type: 'radio',
  },
  {
    type: 'selection',
  },
  {
    prop: 'name',
    label: 'Name',
  },
  {
    prop: 'gender',
    label: 'Gender',
  },
  {
    prop: 'age',
    label: 'Age',
  },
  {
    prop: 'time',
    label: 'Date',
  },
])

function handleRadioChange(row: RowData) {
  radioData.value = row
  console.log(row, 'radio data')
}

function handleSelectionChange(selection: RowData[]) {
  selectionData.value = selection
  console.log(selection, 'selection data')
}

function handleClear() {
  zTableRef.value.clearSelection()
}
</script>

<template>
  <el-button @click="handleClear">
    Clear selection
  </el-button>
  <z-crud
    ref="zTableRef"
    :data="tableData"
    :columns="columns"
    :action="false"
    @radio-change="handleRadioChange"
    @selection-change="handleSelectionChange"
  />
</template>

z-crud Table Attributes

Attribute	Description	Type	Accepted Values	Default
modelValue:data	Display data, supports two-way binding	array	—	—
modelValue:formData	Query form data, supports two-way binding	array	—	—
modelValue:pagination	Pagination configuration, supports two-way binding	object	—	—
modelValue:loading	Table loading, supports two-way binding	boolean	—	—
modelValue:selection	Checkbox selected data, supports two-way binding	array	—	—
columns	Table configuration items	array	—	—
toolBar	Toolbar configuration	object / boolean	—	—
editable	Editable table configuration	object / boolean	—	—
options	Table internal option data source	object	—	—
title	Table title	string / function	—	—
totalData	All table data (effective for frontend pagination)	array	—	—
name	Table `key`, configuring `name` enables caching by default	string	—	—
paginationStorage	Pagination data caching	boolean	—	false
formStorage	Query form data caching	boolean	—	false
formDecorator	Form background	object	—	`{ name: 'el-card' }`
tableDecorator	Table background	object	—	`{ name: 'el-card' }`
watermark	Watermark configuration	object (see `el-watermark` documentation for details)	—	—
height	Table height, defaults to auto height. If height is number type, unit is px; if height is string type, this height will be set as Table's style.height value, Table height will be controlled by external styles.	string / number	—	—
max-height	Table max height. Valid values are numbers or heights in px units.	string / number	—	—
stripe	Whether table is striped	boolean	—	false
border	Whether table has vertical borders	boolean	—	false
size	Table size	string	large / default /small	—
fit	Whether column width fits content	boolean	—	true
show-header	Whether to show table header	boolean	—	true
highlight-current-row	Whether to highlight current row	boolean	—	false
current-row-key	Key of current row, write-only property	string / number	—	—
row-class-name	Function for row className, can also use string to set fixed className for all rows.	function({ row, rowIndex }) / string	—	—
row-style	Function for row style, can also use fixed Object to set same Style for all rows.	function({ row, rowIndex }) / object	—	—
cell-class-name	Function for cell className, can also use string to set fixed className for all cells.	function({ row, column, rowIndex, columnIndex }) / string	—	—
cell-style	Function for cell style, can also use fixed Object to set same Style for all cells.	function({ row, column, rowIndex, columnIndex }) / object	—	—
header-row-class-name	Function for header row className, can also use string to set fixed className for all header rows.	function({ row, rowIndex }) / string	—	—
header-row-style	Function for header row style, can also use fixed Object to set same Style for all header rows.	function({ row, rowIndex }) / object	—	—
header-cell-class-name	Function for header cell className, can also use string to set fixed className for all header cells.	function({ row, column, rowIndex, columnIndex }) / string	—	—
header-cell-style	Function for header cell style, can also use fixed Object to set same Style for all header cells.	function({ row, column, rowIndex, columnIndex }) / object	—	—
row-key	Key for row data, used to optimize Table rendering; required when using `reserve-selection` feature and displaying tree data. When type is String, supports multi-level access: `user.info.id`, but does not support `user.info[0].id`, use `Function` for this case.	function(row) / string	—	—
empty-text	Text displayed when data is empty, can also be set through `#empty` slot	string	—	No Data
default-expand-all	Whether to expand all rows by default, effective when Table contains expandable rows or is tree table	boolean	—	false
expand-row-keys	Set currently expanded rows through this property, requires row-key property to be set, this property is an array of keys for expanded rows.	array	—	—
default-sort	Default sort column prop and order. Its `prop` property specifies default sort column, `order` specifies default sort order	object	(order: 'ascending' 'descending')	'descending')
tooltip-effect	`effect` of overflow tooltip	string	dark / light	dark
tooltip-options	Options for overflow tooltip, see tooltip component below	`object`	see tooltip	`object`
show-summary	Whether to show summary row at table footer	boolean	—	false
sum-text	Text for first column of summary row	string	—	Sum
summary-method	Custom summary calculation method	function({ columns, data })	—	—
span-method	Method for merging rows or columns	function({ row, column, rowIndex, columnIndex })	—	—
select-on-indeterminate	Behavior when clicking header checkbox when only some rows are selected in multi-select table. If true, select all rows; if false, deselect all rows	boolean	—	true
indent	Indentation of tree nodes when displaying tree data	number	—	16
lazy	Whether to lazy load child node data	boolean	—	—
load	Function for loading child node data, effective when `lazy` is true	function(row, treeNode, resolve)	—	—
tree-props	Configuration options for rendering nested data	object	—	`{ hasChildren: 'hasChildren', children: 'children' }`
table-layout	Layout method for table cells, rows and columns	string	fixed / auto	fixed
scrollbar-always-on	Always show scrollbar	boolean	—	false
show-overflow-tooltip	Whether to hide extra content and show them in Tooltip when cell content overflows. This will affect all columns.	boolean / `object`	—	See tooltip-options
flexible	Ensure minimum size of main axis to not exceed content	boolean	—	false

z-crud Table Events

Event Name	Description	Callback Parameters
refresh	Event triggered when paging	pagination
radio-change	Event triggered when user manually checks Radio of data row	row
select	Event triggered when user manually checks Checkbox of data row	selection, row
select-all	Event triggered when user manually checks select all Checkbox	selection
selection-change	Event triggered when selection changes	selection
cell-mouse-enter	Event triggered when cell hover enters	row, column, cell, event
cell-mouse-leave	Event triggered when cell hover leaves	row, column, cell, event
cell-click	Event triggered when a cell is clicked	row, column, cell, event
cell-dblclick	Event triggered when a cell is double clicked	row, column, cell, event
cell-contextmenu	Event triggered when a cell is right clicked	row, column, cell, event
row-click	Event triggered when a row is clicked	row, column, event
row-contextmenu	Event triggered when a row is right clicked	row, column, event
row-dblclick	Event triggered when a row is double clicked	row, column, event
header-click	Event triggered when a column header is clicked	column, event
header-contextmenu	Event triggered when a column header is right clicked	column, event
sort-change	Event triggered when table sort conditions change	`{ column, prop, order }`
filter-change	Column key, if you need to use filter-change event, this attribute is needed to identify which column's filter condition	filters
current-change	Event triggered when table's current row changes, if you want to highlight current row, please enable table's highlight-current-row attribute	currentRow, oldCurrentRow
header-dragend	Event triggered when dragging header changes column width	newWidth, oldWidth, column, event
expand-change	Event triggered when user expands or collapses a row (when expanding rows, second parameter is expandedRows; when tree table, second parameter is expanded)	row, (expandedRows \| expanded)

z-crud Table Methods

Method Name	Description	Parameters
getTableData	Get table data method	—
clearSelection	Clear selection for multi-select table or single-select table	—
getSelectionRows	Return currently selected rows
toggleRowSelection	Toggle selection state of a row for multi-select table, can directly set selection state with second parameter	row, selected
toggleAllSelection	Toggle select all and deselect all for multi-select table	—
toggleRowExpansion	Toggle row expansion for expandable table or tree table. Use second parameter to directly set expansion state	row, expanded
setCurrentRow	Set a row as selected for single-select table, call without parameters to cancel current selection	row
clearSort	Clear sort conditions, data will restore to unsorted state	—
clearFilter	Pass array of `columnKey` to clear filter conditions for specified columns. Clear all filters if no parameters	columnKeys
doLayout	Re-layout Table. You may need to call this method when table visibility changes to get correct layout	—
sort	Sort table manually. `prop` parameter specifies sort column, `order` specifies sort order.	prop: string, order: string
scrollTo	Scroll to specific coordinates	(options: ScrollToOptions \| number, yCoord?: number)
setScrollTop	Set vertical scroll position	top
setScrollLeft	Set horizontal scroll position	left

z-crud Slots

Slot Name	Description	Subtags
append	Content inserted after the last row of table. If table has summary row, this slot will be above summary row.	—
empty	Custom content when data is empty	—
tableTop	Top slot	—
tableBottom	Bottom slot	—
toolBarTop	Toolbar top slot	—
toolBarBottom	Toolbar bottom slot	—
toolBarRight	Toolbar right slot	—
toolBarLeft	Toolbar left slot	—
tableTitle	Table title slot	—
paginationTop	Pagination top slot	—
paginationBottom	Pagination bottom slot	—
paginationLeft	Pagination left slot	—
paginationRight	Pagination right slot	—
formTop	Form top slot	—
formBottom	Form bottom slot	—
crudMiddle	Middle content slot	—

columns Attributes

Attribute	Description	Type	Accepted Values	Default
type	Column type.	string	selection / index / expand/ radio / button	—
component	Column component type.	string	input / select / checkbox / radio / any locally or globally registered component	—
index	If `type=index` is set, you can customize the index by passing the `index` attribute	number / function(index)	—	—
label	Display title (recommended to configure)	string / (scope) => VNode	—	—
form	Form configuration	object	—	—
add	Add form configuration	object / boolean	—	—
edit	Edit form configuration	object / boolean	—	—
search	Search form configuration	object / boolean	—	—
detail	Detail form configuration	object / boolean	—	—
buttons	Button configuration	array	—	—
options	Option component data source	array	—	—
tooltip	Column tooltip	`string` / `() => VNode`	—	—
column-key	Column key, if you need to use filter-change event, this attribute is needed to identify which column's filter condition	string	—	—
prop	Field name corresponding to column content, can also use `property` attribute	string	—	—
width	Column width	string / number	—	—
min-width	Column minimum width, difference with `width` is that `width` is fixed, `min-width` will distribute remaining width proportionally to columns with `min-width` set	string / number	—	—
fixed	Whether column is fixed on left or right side. `true` means fixed on left side	string / boolean	true / 'left' / 'right'	—
render-header	Function for rendering column title Label area	function({ column, $index })	—	—
sortable	Whether column is sortable, if set to 'custom', it means user wants remote sorting, need to listen to Table's sort-change event	boolean / string	custom	false
sort-method	Specify which property to sort by, only effective when `sortable` is set to `true`. Should return a Number like Array.sort	function(a, b)	—	—
sort-by	Specify which property to sort by, only effective when sortable is true and sort-method is not set. If sort-by is array, sort by 1st property first, if equal, sort by 2nd, and so on	function(row, index) / string / array	—	—
sort-orders	Rotation order of sorting strategies used when sorting data, only effective when sortable is true. Need to pass an array, as user clicks table header, column will sort according to array elements in order	array	Array elements need to be one of: `ascending` for ascending, `descending` for descending, `null` for original order	['ascending', 'descending', null]
resizable	Whether column width can be changed by dragging (need to set border attribute to true on el-table)	boolean	—	true
formatter	Function for formatting content	function(row, column, cellValue, index)	—	—
show-overflow-tooltip	Whether to show tooltip when content is too long and hidden	boolean / `object`	—	See table's tooltip-options
align	Alignment	string	left / center / right	left
header-align	Header alignment, if not set, use table's alignment	string	left / center / right	—
class-name	Column className	string	—	—
label-class-name	Custom class name for current column title	string	—	—
selectable	Only effective for type=selection columns, type is Function, Function return value determines whether this row's CheckBox can be checked	function(row, index)	—	—
reserve-selection	Whether to reserve selection after data refresh, only effective for `type=selection` columns, note that you need to specify `row-key` for this feature to work.	boolean	—	false
filters	Data filter options, array format, each element in array needs text and value properties. Each element in array needs text and value properties.	`Array<{text: string, value: string}>`	—	—
filter-placement	Filter popup positioning	string	Same as Tooltip's `placement` attribute	—
filter-multiple	Whether data filter options allow multiple selection	boolean	—	true
filter-method	Method for data filtering, if it's multi-select filter, it will execute multiple times for each data, will show if any execution returns true.	function(value, row, column)	—	—
filtered-value	Selected data filter items, may be needed if you need to customize table header filter rendering.	array	—	—

Event Name	Description	Callback Parameters
refresh	Event triggered when paging	pagination
radio-change	Event triggered when user manually checks Radio of data row	row
select	Event triggered when user manually checks Checkbox of data row	selection, row
select-all	Event triggered when user manually checks select all Checkbox	selection
selection-change	Event triggered when selection changes	selection
cell-mouse-enter	Event triggered when cell hover enters	row, column, cell, event
cell-mouse-leave	Event triggered when cell hover leaves	row, column, cell, event
cell-click	Event triggered when a cell is clicked	row, column, cell, event
cell-dblclick	Event triggered when a cell is double clicked	row, column, cell, event
cell-contextmenu	Event triggered when a cell is right clicked	row, column, cell, event
row-click	Event triggered when a row is clicked	row, column, event
row-contextmenu	Event triggered when a row is right clicked	row, column, event
row-dblclick	Event triggered when a row is double clicked	row, column, event
header-click	Event triggered when a column header is clicked	column, event
header-contextmenu	Event triggered when a column header is right clicked	column, event
sort-change	Event triggered when table sort conditions change	`{ column, prop, order }`
filter-change	Column key, if you need to use filter-change event, this attribute is needed to identify which column's filter condition	filters
current-change	Event triggered when table's current row changes, if you want to highlight current row, please enable table's highlight-current-row attribute	currentRow, oldCurrentRow
header-dragend	Event triggered when dragging header changes column width	newWidth, oldWidth, column, event
expand-change	Event triggered when user expands or collapses a row (when expanding rows, second parameter is expandedRows; when tree table, second parameter is expanded)	row, (expandedRows \| expanded)

z-crud Table Methods

Method Name	Description	Parameters
getTableData	Get table data method	—
clearSelection	Clear selection for multi-select table or single-select table	—
getSelectionRows	Return currently selected rows
toggleRowSelection	Toggle selection state of a row for multi-select table, can directly set selection state with second parameter	row, selected
toggleAllSelection	Toggle select all and deselect all for multi-select table	—
toggleRowExpansion	Toggle row expansion for expandable table or tree table. Use second parameter to directly set expansion state	row, expanded
setCurrentRow	Set a row as selected for single-select table, call without parameters to cancel current selection	row
clearSort	Clear sort conditions, data will restore to unsorted state	—
clearFilter	Pass array of `columnKey` to clear filter conditions for specified columns. Clear all filters if no parameters	columnKeys
doLayout	Re-layout Table. You may need to call this method when table visibility changes to get correct layout	—
sort	Sort table manually. `prop` parameter specifies sort column, `order` specifies sort order.	prop: string, order: string
scrollTo	Scroll to specific coordinates	(options: ScrollToOptions \| number, yCoord?: number)
setScrollTop	Set vertical scroll position	top
setScrollLeft	Set horizontal scroll position	left

z-crud Slots

Slot Name	Description	Subtags
append	Content inserted after the last row of table. If table has summary row, this slot will be above summary row.	—
empty	Custom content when data is empty	—
tableTop	Top slot	—
tableBottom	Bottom slot	—
toolBarTop	Toolbar top slot	—
toolBarBottom	Toolbar bottom slot	—
toolBarRight	Toolbar right slot	—
toolBarLeft	Toolbar left slot	—
tableTitle	Table title slot	—
paginationTop	Pagination top slot	—
paginationBottom	Pagination bottom slot	—
paginationLeft	Pagination left slot	—
paginationRight	Pagination right slot	—
formTop	Form top slot	—
formBottom	Form bottom slot	—
crudMiddle	Middle content slot	—

Attribute	Description	Type	Accepted Values	Default
reference	Reference text	`string` / `(scope) => VNode`	—	`More`
onCommand	Event callback triggered when menu item is clicked	`(command) => void`	—	—
type	Menu button type, same as `Button` component, only effective when `split-button` is true.	string	—	—
size	Menu size, also affects trigger button when split-button is true.	string	`large` / `default` / `small`	default
max-height	Maximum height of menu	string / number	—	—
split-button	Whether dropdown trigger element is presented as button group	boolean	—	false
disabled	Whether disabled	boolean	—	false
placement	Menu popup position	string	`top`/`top-start`/`top-end`/`bottom`/`bottom-start`/`bottom-end`	bottom
trigger	Behavior to trigger dropdown	string	`hover` / `click` /`contextmenu`	hover
hide-on-click	Whether to hide menu after clicking menu item	boolean	—	true
show-timeout	Delay before showing dropdown menu, only effective when trigger is hover	number	—	250
hide-timeout	Delay before hiding dropdown menu (only effective when trigger is hover)	number	—	150
role	ARIA attribute for dropdown menu. You might want to change this to "navigation" based on specific scenarios	string	—	'menu'
tabindex	tabindex for Dropdown component	number	—	0
popper-class	Custom class name for popper	string	—	—
popper-options	popper.js parameters	Object	See popper.js documentation	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported	Whether to insert dropdown list to body element	boolean	—	true

Attribute	Description	Type	Accepted Values	Default
disabled	Whether disabled	`boolean / ({ row, $index, column }) => boolean`	—	false
onClick	Dropdown item click	`({ row, $index, column }) => void`	—	—
divided	Whether to show divider	`boolean`	—	false
icon	Custom icon	`string` / `Component`	—	—

Attribute	Description	Type	Accepted Values	Default
exclude	Table item label collection not shown in toolbar	`array`	—	—
unCheck	Default unchecked label collection	`array`	—	—
refresh	Whether refresh feature is displayed	`boolean`	—	`true`
density	Whether density feature is displayed	`boolean`	—	`true`
fullScreen	Whether fullscreen feature is displayed	`boolean`	—	`true`
setting	Whether column setting feature is displayed	`boolean`	—	`true`

Crud Table ​

Table Usage ​

Table Title ​

Operation Items ​

Custom Operation Items ​

Operation Dropdown ​

Pagination ​

Frontend Pagination ​

Hide Columns ​

Custom Column ​

Column Tooltip ​

Column Types ​

Custom Table Header ​

Editable Table ​

Sticky ​

Watermark ​

Table Methods ​

z-crud Table Attributes ​

z-crud Table Events ​

z-crud Table Methods ​

z-crud Slots ​

columns Attributes ​

z-crud Table Methods ​

z-crud Slots ​

button type dropdown Attributes ​

dropdown children Attributes ​

toolBar Attributes ​

Crud Table

Table Usage

Table Title

Operation Items

Custom Operation Items

Operation Dropdown

Pagination

Frontend Pagination

Hide Columns

Custom Column

Column Tooltip

Column Types

Custom Table Header

Editable Table

Sticky

Watermark

Table Methods

z-crud Table Attributes

z-crud Table Events

z-crud Table Methods

z-crud Slots

columns Attributes

z-crud Table Methods

z-crud Slots

button type dropdown Attributes

dropdown children Attributes

toolBar Attributes