ArrayTable 自增表格

表格自增，删除，上移，下移

基础用法

ArrayTable和ArrayTableColumn本身是由Table和TableColumn组件扩展而来,所以属性事件插槽请参考对应的 api。

vue

<template>
  <el-form :model="form" label-width="auto">
    <el-form-item prop="list" label="">
      <el-array-table style="width: 100%">
        <el-array-table-column prop="name" label="Name" width="245">
          <template #default="{ $index }">
            <el-form-item>
              <el-editable
                :model-value="form['list'][$index]['name']"
                trigger="icon"
              >
                <el-input v-model="form['list'][$index]['name']" />
              </el-editable>
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column prop="date" label="Date" width="245">
          <template #default="{ $index }">
            <el-form-item>
              <el-date-picker
                v-model="form['list'][$index]['date']"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column prop="address" label="Address" width="auto">
          <template #default="{ $index }">
            <el-form-item>
              <el-input v-model="form['list'][$index]['address']" />
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column label="Operations" width="150" fixed="right">
          <template #default>
            <SortHandle />
            <Remove />
            <MoveDown />
            <MoveUp />
          </template>
        </el-array-table-column>

        <template #addition="{ field }">
          <Addition
            v-if="field.fieldValue.length < 10"
            title="添加"
            :default-value="{}"
            style="margin-top: 12px"
          />
        </template>
      </el-array-table>
    </el-form-item>
  </el-form>
  <!-- <pre>{{ form.list }}</pre> -->
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElArrayTable } from 'element-plus-x'

const { Addition, Remove, MoveDown, MoveUp, SortHandle } = ElArrayTable

const form = reactive({
  list: [
    {
      date: '2025-01-01',
      name: 'Summer1',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2025-01-02',
      name: 'Summer2',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2025-01-03',
      name: 'Summer3',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2025-01-04',
      name: 'Summer4',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ],
})
</script>

分页

使用 pagination 属性开启分页

vue

<template>
  <el-form :model="form" label-width="auto">
    <el-form-item prop="list" label="">
      <el-array-table style="width: 100%" :pagination="{ pageSize: 5 }">
        <el-array-table-column prop="name" label="Name" width="245">
          <template #default="{ $index }">
            <el-form-item>
              <el-editable
                :model-value="form['list'][$index]['name']"
                trigger="icon"
              >
                <el-input v-model="form['list'][$index]['name']" />
              </el-editable>
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column prop="date" label="Date" width="245">
          <template #default="{ $index }">
            <el-form-item>
              <el-date-picker
                v-model="form['list'][$index]['date']"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column prop="address" label="Address" width="auto">
          <template #default="{ $index }">
            <el-form-item>
              <el-input v-model="form['list'][$index]['address']" />
            </el-form-item>
          </template>
        </el-array-table-column>

        <el-array-table-column label="Operations" width="150" fixed="right">
          <template #default>
            <SortHandle />
            <Remove />
            <MoveDown />
            <MoveUp />
          </template>
        </el-array-table-column>

        <template #addition="{ field }">
          <Addition
            v-if="field.fieldValue.length < 15"
            title="添加"
            :default-value="{}"
            style="margin-top: 12px"
          />
        </template>
      </el-array-table>
    </el-form-item>
  </el-form>
  <!-- <pre>{{ form.list }}</pre> -->
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElArrayTable } from 'element-plus-x'

const { Addition, Remove, MoveDown, MoveUp, SortHandle } = ElArrayTable

const form = reactive({
  list: Array.from({ length: 9 }).map((_, index) => {
    return {
      date: `2025-01-0${index + 1}`,
      name: `Summer${index + 1}`,
      address: 'No. 189, Grove St, Los Angeles',
    }
  }),
})
</script>

校验

使用 form-item 组件的 rules 属性即可，更多自定义校验，请参考官方文档

vue

<template>
  <el-form ref="ruleFormRef" :model="form" label-width="auto">
    <el-form-item prop="list" label="">
      <el-array-table style="width: 100%">
        <el-array-table-column prop="name" label="Name" width="245">
          <template #default="{ $index }">
            <el-form-item
              :prop="`list[${$index}]['name']`"
              :rules="{
                required: true,
                message: 'name can not be null',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="form['list'][$index]['name']"
                placeholder="Please input"
              />
            </el-form-item>
          </template>
        </el-array-table-column>
        <el-array-table-column prop="date" label="Date" width="245">
          <template #default="{ $index }">
            <el-form-item
              :prop="`list[${$index}]['date']`"
              :rules="{
                required: true,
                message: 'date can not be null',
                trigger: 'change',
              }"
            >
              <el-date-picker
                v-model="form['list'][$index]['date']"
                type="date"
                placeholder="Please select"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </template>
        </el-array-table-column>
        <el-array-table-column prop="address" label="Address" width="auto">
          <template #default="{ $index }">
            <el-form-item
              :prop="`list[${$index}]['address']`"
              :rules="{
                required: true,
                message: 'address can not be null',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="form['list'][$index]['address']"
                placeholder="Please input"
              />
            </el-form-item>
          </template>
        </el-array-table-column>
        <el-array-table-column label="Operations" width="130">
          <template #default>
            <Remove />
            <MoveDown />
            <MoveUp />
          </template>
        </el-array-table-column>

        <template #addition="{ field }">
          <Addition
            v-if="field.fieldValue.length < 10"
            title="添加"
            :default-value="{}"
            style="margin-top: 12px"
          />
        </template>
      </el-array-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
  <!-- <pre>{{ form.list }}</pre> -->
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElArrayTable } from 'element-plus-x'
import type { FormInstance } from 'element-plus'

const { Addition, Remove, MoveDown, MoveUp } = ElArrayTable
const ruleFormRef = ref<FormInstance>()

const form = reactive({
  list: Array.from({ length: 5 }).map((_, index) => {
    return {
      date: '',
      name: '',
      address: '',
    }
  }),
})

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

API

ArrayTable 属性

属性名	说明	类型	默认值
pagination	pagination 组件属性	object	-
table	table 组件属性	-	-

ArrayTableColumn 属性

属性名	说明	类型	默认值
table-column	table-column 组件属性	-	-

Addition, Remove, MoveDown, MoveUp

属性名	说明	类型	默认值
组件的 `属性` `事件` `插槽`	参考 ArrayItems 自增列表	-	-

ArrayTable 插槽

插槽名	说明	参数
prepend	table 前置插槽	`{field:FormItemContext }`
addition	table 后置插槽,比如放添加按钮等操作，或者使用 table 自带的 append 插槽，但是参数和 addition 插槽不一样	`{field:FormItemContext }`

源代码

组件 • 样式 • 文档

贡献者

ArrayItems 自增列表

TableDialog 表格弹窗

ArrayTable 自增表格 ​

基础用法 ​

分页 ​

校验 ​

API ​

ArrayTable 属性 ​

ArrayTableColumn 属性 ​

Addition, Remove, MoveDown, MoveUp ​

ArrayTable 插槽 ​

源代码 ​

贡献者 ​

ArrayTable 自增表格

基础用法

分页

校验

API

ArrayTable 属性

ArrayTableColumn 属性

Addition, Remove, MoveDown, MoveUp

ArrayTable 插槽

源代码

贡献者