element-plus-dynamic-form

基础用法

tableColumns 建议使用 computed 属性，当表格列属性发生变化时，便于及时更新表格列配置项。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

渲染列

序号

renderType 设置 index

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    renderType: 'index',
    label: '序号'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

选择

renderType 设置 selection

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    renderType: 'selection'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

展开

renderType 设置 expand，展开内容可用插槽填充，具体用法同 FormRender 插槽用法，使用 template 或 jsx 插槽，这里采用 jsx 插槽举例。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    renderType: 'expand',
    comProps: {
      slots: {
        default: (scope) => (
          <div>
            当前用户姓名：{scope.row.name}，年龄：{scope.row.age}
          </div>
        )
      }
    }
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

操作

renderType 设置 slot，操作内容同样可使用插槽，这里使用 template 插槽举例。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData">
    <template #action="{ row }">
      <el-button type="primary" size="small" @click="handleUpdate(row)">修改</el-button>
      <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
    </template>
  </base-table>
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const tableColumns = computed(() => [
  {
    renderType: 'selection'
  },
  {
    prop: 'name',
    label: '姓名',
    width: 200
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'tel',
    label: '手机号',
    width: 200
  },
  {
    renderType: 'slot',
    prop: 'action',
    label: '操作',
    fixed: 'right',
    width: 180
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18,
    sex: 'male',
    tel: '13800000000'
  },
  {
    name: '李四',
    age: 20,
    sex: 'female',
    tel: '13900000000'
  },
  {
    name: '王五',
    age: 22,
    sex: 'male',
    tel: '13700000000'
  }
])

const handleUpdate = (row) => {
  ElMessage.primary(`修改${JSON.stringify(row)}`)
}

const handleDelete = (row) => {
  ElMessage.error(`删除${JSON.stringify(row)}`)
}
</script>

<style>
@import '../../style/table-reset.css';
</style>

格式化

表格列项增加 formatter 属性，用于格式化列项数据，通常用于字典转换、状态转换等场景。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'sex',
    label: '性别',
    formatter: (row) => {
      return row.sex === 'male' ? '男' : '女'
    }
  },
  {
    prop: 'status',
    label: '状态',
    formatter: (row) => {
      if (row.status === 1) {
        return <el-tag type="success">正常</el-tag>
      } else {
        return <el-tag type="danger">异常</el-tag>
      }
    }
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18,
    sex: 'male',
    status: 1
  },
  {
    name: '李四',
    age: 20,
    sex: 'female',
    status: 0
  },
  {
    name: '王五',
    age: 22,
    sex: 'male',
    status: 1
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

多级表头

tableColumns 支持多级表头，通过 children 属性实现。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" />
</template>

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

const testLabel = ref('test')

const tableColumns = computed(() => [
  {
    prop: 'date',
    label: testLabel.value
  },
  {
    label: 'Delivery Info',
    children: [
      {
        prop: 'name',
        label: 'Name'
      },
      {
        label: 'Address Info',
        children: [
          {
            prop: 'state',
            label: 'State'
          },
          {
            prop: 'city',
            label: 'City'
          },
          {
            prop: 'address',
            label: 'Address'
          },
          {
            prop: 'zip',
            label: 'Zip'
          }
        ]
      }
    ]
  }
])
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  }
])
</script>

分页

BaseTable 支持分页，设置 total 属性不为 0（通常为服务器接口返回的总记录数），同时 is-form 设置 false，is-virtual 设置 false。

示例

代码

<template>
  <base-table :table-columns="tableColumns" :table-data="tableData" :total="3" />
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue'
const tableColumns = computed(() => [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  }
])
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])
</script>

<style>
@import '../../style/table-reset.css';
</style>

Form 模式

BaseTable 支持 Form 模式，设置 is-form 为 true。

示例

代码

<template>
  <base-table
    :table-columns="tableColumns"
    :table-data="tableData"
    :is-form="true"
    @row-click="handleRowClick"
    ref="baseTableRef"
  />
  <div style="margin-top: 16px">
    <el-button type="primary" @click="handleSave">保存</el-button>
    <el-button type="primary" @click="handleReset">重置</el-button>
    <el-button type="primary" @click="handleClearValidate">清除校验</el-button>
    <el-button type="primary" @click="handleClear"> 清空所选项 </el-button>
    <el-button type="primary" @click="handleGetSelectionRows"> 获取选中行 </el-button>
    <el-button type="primary" @click="hanldeClearSecondRowBirthValidate"> 清空第二行生日字段校验 </el-button>
  </div>
</template>

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

const baseTableRef = ref()
const tableColumns = computed(() => [
  {
    renderType: 'selection',
    width: 55
  },
  {
    prop: 'name',
    label: '姓名',
    renderType: 'el-input',
    width: 220,
    itemProps: {
      rules: [
        {
          required: true,
          message: '请输入姓名',
          trigger: ['blur']
        }
      ]
    },
    comProps: {
      placeholder: '请输入姓名'
    }
  },
  {
    prop: 'age',
    label: '年龄',
    renderType: 'el-input-number',
    width: 220,
    itemProps: {
      rules: [
        {
          required: true,
          message: '请输入年龄',
          trigger: ['blur', 'change']
        }
      ]
    },
    comProps: {
      placeholder: '请输入年龄',
      style: {
        width: '100%'
      }
    }
  },
  {
    renderType: 'el-date-picker',
    prop: 'birthday',
    label: '生日',
    width: 200,
    itemProps: {
      rules: [
        {
          required: true,
          message: '请选择生日',
          trigger: ['change']
        }
      ]
    },
    comProps: {
      type: 'date',
      valueFormat: 'YYYY-MM-DD',
      placeholder: '请选择生日'
    }
  }
])
const tableData = ref([
  {
    name: '',
    age: null,
    birthday: ''
  },
  {
    name: '',
    age: null,
    birthday: ''
  },
  {
    name: '',
    age: null,
    birthday: ''
  }
])

const handleSave = () => {
  baseTableRef.value?.validate((valid: boolean) => {
    if (valid) {
      console.log('校验通过')
      console.log(tableData.value)
    } else {
      console.log('校验不通过')
    }
  })
}

const handleReset = () => {
  baseTableRef.value?.resetFields()
}

const handleClearValidate = () => {
  baseTableRef.value?.clearValidate()
}

const handleRowClick = (row: Record<string, any>) => {
  console.log('row:', row)
}

const handleClear = () => {
  baseTableRef.value?.clearSelection()
}

const handleGetSelectionRows = () => {
  const selectionRows = baseTableRef.value?.getSelectionRows() || []
  console.log('selectionRows:', selectionRows)
}

const hanldeClearSecondRowBirthValidate = () => {
  const birthField = baseTableRef.value?.getField('tableData.1.birthday')
  birthField?.clearValidate()
}
</script>

is-form 为 true 时，BaseTable 本质是一个表单，可通过 ref 实例调用 el-form 暴露的方法 is-form 为 false 时，BaseTable 本质是一个表格，可通过 ref 实例调用 el-table 或 el-table-v2 暴露的方法

虚拟表格

BaseTable 支持虚拟滚动，设置 is-virtual 为 true。

示例

代码

<template>
  <base-table
    :table-columns="tableColumns"
    :table-data="tableData"
    :is-form="true"
    :is-virtual="true"
    :width="700"
    :height="400"
    :estimated-row-height="64"
    expand-column-key="name"
    ref="tableRef"
  />
  <div style="margin-top: 16px">
    <el-button type="primary" @click="handleSubmit">提交</el-button>
    <el-button type="primary" @click="handleScroll">滚动</el-button>
  </div>
</template>

<script lang="tsx" setup name="Issuer">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'

const nameRequired = ref(true)
const tableColumns = computed(() => [
  {
    renderType: 'selection',
    width: 50
  },
  {
    prop: 'index',
    renderType: 'index',
    label: '序号',
    width: 50
  },
  {
    prop: 'name',
    label: '姓名',
    width: 200,
    renderType: 'el-input',
    itemProps: {
      rules: [
        {
          required: nameRequired.value,
          message: '请输入姓名',
          trigger: ['blur']
        }
      ]
    },
    comProps: {
      placeholder: '请输入姓名'
    }
  },
  {
    prop: 'age',
    label: '年龄',
    width: 100
  },
  {
    renderType: 'slot',
    prop: 'action',
    label: '操作',
    width: 150,
    comProps: {
      slots: {
        default: (scope: any) => (
          <el-button type="text" onClick={() => handleGetRowData(scope.rowData)}>
            获取当前行数据
          </el-button>
        )
      }
    }
  }
])

const tableRef = ref()
const tableData = ref([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  }
])

const handleGetRowData = (row: any) => {
  console.log('row:', row)
}

const handleSubmit = () => {
  tableRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('submit!')
    } else {
      ElMessage.error('error submit!!')
      return false
    }
  })
}

const handleScroll = () => {
  tableRef.value.scrollTo({
    scrollTop: 5000
  })
}
</script>

API

Table 属性

属性	释义	说明
`isVirtual`	是否虚拟表格	默认 false
`isForm`	是否 Form 模式	默认 false
`tableColumns`	表格列配置项	参考 el-table-column
`tableData`	表格数据	表格数据，默认 []
`total`	表格数据总数	表格数据总数，默认 0
`pageNum`	当前页码	默认 1
`pageSize`	每页条数	默认 10
`pageSizes`	每页条数选项	默认 [10, 20, 50, 100, 500]
`isAutoResize`	是否自动调整列宽	默认 false（`isVirtual`为 true 时才生效）

其他属性

isVirtual 为 true 时，参考 el-table-v2 。
isVirtual 为 false 时，参考 el-table 。

TableColumn 属性

属性	释义	说明
`prop`	表单项属性名	用于绑定表单数据
`label`	列标题	-
`renderType`	渲染类型	非必需，通常 `Form` 模式才使用，可以为 element-plus 组件，如(el-input,el-select 等)，也可以为自定义组件
`children`	子列配置项	非必需，通常多级表头时才使用
`itemProps`	el-form-item 属性	非必需，通常 `Form` 模式才使用，参考 el-form-item
`comProps`	组件属性	非必需，通常 `Form` 模式才使用，参考 el-input、el-select 或自定义组件等自身属性
`comEvents`	组件事件	非必需，通常 `Form` 模式才使用，参考 el-input、el-select 或自定义组件等自身事件，如 onBlur,onChange 等

其他属性

isVirtual 为 true 时，参考 el-table-v2-column 。
isVirtual 为 false 时，参考 el-table-column 。