FormTableditor 表格编辑表单

快速的数据化配置一个表格编辑器布局表单。

基础使用

设置 row._view_ 属性可开启查看模式，表单行可快速在查看和编辑中切换。

点击查看代码

<template>
  <ElForm :model="model" class="demo">
    <AgelFormTableditor ref="tablediorRef" model-prop="list" :items="items" border @selection-change="selectionChange">
    </AgelFormTableditor>
  </ElForm>
</template>

<script setup lang='tsx'>
import { reactive, ref } from 'vue'
import { ElMessage, type TableInstance } from 'element-plus'

const tablediorRef = ref()

const model = reactive({
  list: Array.from({ length: 5 }).map((v, i) => {
    return {
      name: '小王' + (i + 1),
      date: '',
      address: 'No. 189, Grove St, Los Angeles',
      checked: false,
      _view_: false,
    }
  })
})

const items = reactive([
  { label: '#', type: 'selection', width: 50, align: 'center', },
  { label: '#', type: 'index', width: 50, align: 'center', },
  {
    label: '动态表单',
    prop: 'name',
    headerAlign: 'center',
    children: [
      {
        label: '名称',
        prop: 'name',
      },
      {
        label: '日期',
        prop: 'date',
        slot: 'el-date-picker',
        required: true,
        attrs: {
          valueFormat: 'YYYY-MM-DD',
        }
      },
      {
        label: '地址',
        prop: 'address',
        showOverflowTooltip: true,
      },
      {
        label: 'switch',
        prop: 'checked',
        width: 90,
        slot: 'el-switch',
        viewFormat: ({ rowData }: any) => {
          return <el-tag>{rowData.checked ? '已禁用' : '未禁用'}</el-tag>
        }
      },
    ]
  },
  {
    width: 120,
    viewModel: false,
    align: 'center',
    label: () => {
      return (
        <div class='flex-center'>
          <span>操作</span>
          <el-link type="primary" class='ml-1' icon='Plus' onClick={() => addRow()}>
          </el-link>
        </div>
      )
    },
    slot: ({ rowData, rowIndex }: any) => {
      return (
        <div>
          <el-button link type='primary' onClick={() => saveRow(rowIndex,)} >
            {rowData._view_ ? '编辑' : '保存'}
          </el-button>
          <el-divider direction="vertical" />
          <el-button link type='primary' onClick={() => delRow(rowIndex)} >
            删除
          </el-button>
        </div>
      )
    }
  }
])

function saveRow(index: number) {
  tablediorRef.value.validateRow(index).then(() => {
    model.list[index]._view_ = !model.list[index]._view_
  })
}

function delRow(index: number) {
  model.list.splice(index, 1)
}

function addRow() {
  model.list.push({ date: '', name: '小王' + (model.list.length + 1), address: '', checked: false, _view_: false })
}

function selectionChange() {
  const names = tablediorRef.value?.getRef('elTable').getSelectionRows().map((v: any) => v.name).join()
  names.length > 0 && ElMessage.success('选中：' + names)
}
</script>

属性

属性	类型	默认值	说明
items	ItemProps[]	-	表单配置项
model-prop	string	-	表单 model 键名，必需
......	TableProps	-	ElTable 属性

ItemProps

属性	类型	默认值	说明
......	-	-	AgelFormItem 属性
type, index, align, headerAlign, width, minWidth, fixed, showOverflowTooltip	-	-	ElTableColumn 属性

方法

名称	参数	说明
getRef	prop | 'elTable'	获取组件实例
validateRow	index,callback	验证某一行表单

插槽

名称	插槽作用域	说明
slot-xx	itemProps	item 组件具名插槽
prepend	-	items 前置插槽
append	-	items 后置插槽
empty	-	ELTable empty 插槽
append-row	-	ELTable append 插槽