BaseTable ​

<template>
  <base-table
    :table-data="tableData"
    :table-columns="tableColumns"
    :is-show-pagination="false"
    :table-height="400"
  />
</template>

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

const tableData = ref([
  { name: 'Tom', age: 25, address: 'New York' },
  { name: 'Jerry', age: 30, address: 'London' },
  { name: 'Alice', age: 28, address: 'Paris' },
])

const tableColumns = ref([
  { prop: 'name', label: 'Name', minWidth: 120 },
  { prop: 'age', label: 'Age', minWidth: 80 },
  { prop: 'address', label: 'Address', minWidth: 200 },
])
</script>

<template>
  <div style="margin-bottom: 12px">
    <el-alert
      type="info"
      show-icon
      :closable="false"
      title="This demo hides the search button. Typing in Name or changing Status, City, or Created Date triggers search automatically."
    />
  </div>

  <div style="margin-bottom: 12px">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="Last search params">
        <pre style="margin: 0">{{ lastSearchText }}</pre>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <base-table
    :table-data="tableData"
    :table-columns="tableColumns"
    :top-inputs="topInputs"
    :has-search="true"
    :has-reset="true"
    :search-on-select-blur="true"
    :is-show-pagination="false"
    :table-height="360"
    @search="onSearch"
    @reset="onReset"
  />
</template>

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

const sourceData = [
  {
    name: 'Tom',
    status: 'active',
    city: 'new-york',
    cityLabel: 'New York',
    createdAt: '2026-04-01',
  },
  {
    name: 'Jerry',
    status: 'inactive',
    city: 'london',
    cityLabel: 'London',
    createdAt: '2026-04-08',
  },
  {
    name: 'Alice',
    status: 'active',
    city: 'paris',
    cityLabel: 'Paris',
    createdAt: '2026-04-15',
  },
  {
    name: 'Bob',
    status: 'pending',
    city: 'new-york',
    cityLabel: 'New York',
    createdAt: '2026-04-21',
  },
]

const tableData = ref([...sourceData])
const lastSearchData = ref<Record<string, any>>({})

const tableColumns = [
  { prop: 'name', label: 'Name', minWidth: 140 },
  { prop: 'status', label: 'Status', minWidth: 120 },
  { prop: 'cityLabel', label: 'City', minWidth: 140 },
  { prop: 'createdAt', label: 'Created Date', minWidth: 140 },
]

const topInputs = [
  { prop: 'name', placeholder: 'Type to search name', element: 'el-input' },
  {
    prop: 'status',
    placeholder: 'Status',
    element: 'el-select',
    clearable: true,
    options: [
      { label: 'Active', value: 'active' },
      { label: 'Inactive', value: 'inactive' },
      { label: 'Pending', value: 'pending' },
    ],
  },
  {
    prop: 'city',
    placeholder: 'City (select-v2)',
    element: 'el-select-v2',
    clearable: true,
    multiple: true,
    options: [
      { label: 'New York', value: 'new-york' },
      { label: 'London', value: 'london' },
      { label: 'Paris', value: 'paris' },
    ],
  },
  {
    prop: 'createdAt',
    element: 'el-date-picker',
    type: 'daterange',
    valueFormat: 'YYYY-MM-DD',
    startPlaceholder: 'Created start',
    endPlaceholder: 'Created end',
    unlinkPanels: true,
    inputWidth: '280px',
  },
]

const lastSearchText = computed(() =>
  JSON.stringify(lastSearchData.value, null, 2)
)

const onSearch = (params: Record<string, any>) => {
  lastSearchData.value = params
  tableData.value = sourceData.filter((item) => {
    if (
      params.name &&
      !item.name.toLowerCase().includes(String(params.name).toLowerCase())
    ) {
      return false
    }
    if (params.status && item.status !== params.status) {
      return false
    }
    if (params.city && item.city !== params.city) {
      return false
    }
    if (params.createdAt?.length === 2) {
      const [start, end] = params.createdAt
      if (item.createdAt < start || item.createdAt > end) {
        return false
      }
    }
    return true
  })
}

const onReset = () => {
  lastSearchData.value = {}
  tableData.value = [...sourceData]
}
</script>

<template>
  <base-table
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="400"
    header-filter
    @search="onSearch"
  />
</template>

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

const tableData = ref([
  { name: 'Tom', age: 25, status: 'active', date: '2024-01-15' },
  { name: 'Jerry', age: 30, status: 'inactive', date: '2024-03-20' },
  { name: 'Alice', age: 28, status: 'active', date: '2024-05-10' },
  { name: 'Bob', age: 35, status: 'pending', date: '2024-07-08' },
  { name: 'Charlie', age: 22, status: 'active', date: '2024-09-12' },
  { name: 'Diana', age: 31, status: 'inactive', date: '2024-11-25' },
])

const tableColumns = ref([
  {
    prop: 'name',
    label: 'Name',
    minWidth: 120,
    filter: [
      {
        element: 'el-input',
        prop: 'name',
        placeholder: 'Name',
      },
      {
        element: 'el-select',
        prop: 'carrier',
        options: [
          { label: 'Police', value: 'Police' },
          { label: 'Fire', value: 'Fire' },
          { label: 'All', value: 'Ambulance' },
        ],
        placeholder: 'Carrier',
      },
    ],
  },
  { prop: 'age', label: 'Age', minWidth: 80 },
  {
    prop: 'status',
    label: 'Status',
    minWidth: 120,
    filter: {
      type: 'checkboxGroup',
      options: [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
        { label: 'Pending', value: 'pending' },
      ],
      defaultValue: [],
    },
  },
  {
    prop: 'date',
    label: 'Date',
    minWidth: 150,
    filter: {
      type: 'daterange',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      defaultValue: [],
    },
  },
])

const onSearch = (params: any) => {
  console.log('search with filters:', params)
}
</script>

<template>
  <base-table
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="400"
    select-type="checkbox"
    :is-show-pagination="false"
    @selection-change="onSelectionChange"
  />
</template>

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

const tableData = ref([
  { name: 'Tom', age: 25, address: 'New York' },
  { name: 'Jerry', age: 30, address: 'London' },
  { name: 'Alice', age: 28, address: 'Paris' },
])

const tableColumns = ref([
  { prop: 'name', label: 'Name', minWidth: 120 },
  { prop: 'age', label: 'Age', minWidth: 80 },
  { prop: 'address', label: 'Address', minWidth: 200 },
])

const onSelectionChange = (selection: any[]) => {
  console.log('selection', selection)
}
</script>

<template>
  <base-table
    ref="tableRef"
    v-model:table-data="tableData"
    :search-method="searchMethod"
    :table-columns="tableColumns"
    :is-show-pagination="true"
    :default-page-size="10"
    :page-sizes="[10, 20, 50]"
    :table-height="400"
  />
</template>

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

const tableRef: any = ref(null)
const tableData = ref([])

onMounted(() => {
  tableRef.value?.onSearch()
})

const tableColumns = ref([
  { prop: 'name', label: 'Name', minWidth: 120 },
  { prop: 'age', label: 'Age', minWidth: 80 },
  { prop: 'address', label: 'Address', minWidth: 200 },
])

const searchMethod = (searchData: any) => {
  console.log('搜索参数:', searchData)
  const result = Array.from({ length: 50 }, (_, i) => ({
    name: `User ${i + 1}`,
    age: 20 + (i % 30),
    address: `City ${i + 1}`,
  }))
  return Promise.resolve({
    result: {
      list: result,
      total: result.length,
    },
  })
}
</script>

<template>
  <base-table
    ref="baseTableRef"
    :table-data="tableData"
    :table-columns="tableColumns"
    :use-virtual="true"
    :middle-buttons="middleButtons"
    :estimated-row-height="48"
    :table-height="400"
    :is-show-pagination="false"
  />
</template>

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

const tableData = ref(
  Array.from({ length: 10000 }, (_, i) => ({
    name: `User ${i + 1}`,
    age: 20 + (i % 30),
    address: `City ${i + 1}`,
  }))
)

const baseTableRef: any = ref(null)
const handleCurrentChange = (count: number) => () => {
  tableData.value = Array.from({ length: count }, (_, i) => ({
    name: `User ${i + 1}`,
    age: 20 + (i % 30),
    address: `City ${i + 1}`,
  }))
  baseTableRef.value?.doLayout()
}

const middleButtons = ref([
  { text: 'Load 10000', onClick: handleCurrentChange(10000) },
  { text: 'Load 50000', onClick: handleCurrentChange(50000) },
  { text: 'Load 100000', onClick: handleCurrentChange(100000) },
])

const tableColumns = ref([
  { prop: 'name', label: 'Name', minWidth: 120 },
  { prop: 'age', label: 'Age', minWidth: 80 },
  { prop: 'address', label: 'Address', minWidth: 200 },
])
</script>

<template>
  <div style="margin-bottom: 12px">
    <el-button type="primary" @click="validateTable">Validate table</el-button>
    <el-button @click="clearValidate">Clear validation</el-button>
  </div>

  <base-table
    ref="tableRef"
    :table-data="tableData"
    :table-columns="tableColumns"
    select-type="none"
    :is-show-pagination="false"
    :table-height="260"
  />
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { EditCell, ElMessage } from 'element-plus'

const tableRef = ref<any>()

const tableData = ref([
  {
    productName: '',
    quantity: 0,
    remark: 'Click validate to show cell errors',
  },
  {
    productName: 'Keyboard',
    quantity: 2,
    remark: 'Edit values and validate again',
  },
])

const createCellProp = (index: number, prop: string) => [
  'tableData',
  String(index),
  prop,
]

const tableColumns = [
  {
    prop: 'productName',
    label: 'Product Name',
    minWidth: 220,
    render: ({ row, index }: any) =>
      h(EditCell, {
        value: row.productName,
        prop: createCellProp(index, 'productName'),
        alwaysEdit: true,
        placeholder: 'Please input product name',
        rules: [{ required: true, message: 'Product name is required' }],
        'onUpdate:value': (val: string) => {
          row.productName = val
        },
      }),
  },
  {
    prop: 'quantity',
    label: 'Quantity',
    width: 180,
    render: ({ row, index }: any) =>
      h(EditCell, {
        value: row.quantity,
        prop: createCellProp(index, 'quantity'),
        element: 'el-input-number',
        alwaysEdit: true,
        min: 1,
        itemProps: {
          controlsPosition: 'right',
        },
        rules: [
          { required: true, message: 'Quantity is required' },
          {
            validator: (
              _rule: any,
              value: any,
              callback: (error?: Error) => void
            ) => {
              if (typeof value === 'number' && value > 0) {
                callback()
                return
              }
              callback(new Error('Quantity must be greater than 0'))
            },
          },
        ],
        'onUpdate:value': (val: number) => {
          row.quantity = val
        },
      }),
  },
  {
    prop: 'remark',
    label: 'Remark',
    minWidth: 240,
  },
]

const validateTable = async () => {
  try {
    await tableRef.value?.validateCells()
    ElMessage.success('All editable cells passed validation')
  } catch (err) {
    console.log(err)
    ElMessage.error('Please fix the invalid editable cells')
  }
}

const clearValidate = () => {
  tableRef.value?.clearCellValidate()
}
</script>