表单构建

快速开始

安装

pnpm

pnpm add @howuse/element-plus-edit-table

npm

npm i @howuse/element-plus-edit-table

yarn

yarn add @howuse/element-plus-edit-table

简单示例

<template>
    <div class="vp-raw">
        <ElEditTable v-model:data="data" ref="myTable" :is-edit="true">
            <ElEditTableColumn type="expand">
                <template #default="{ row }">
                    展开的内容 {{ row }}
                </template>
            </ElEditTableColumn>
            <ElEditTableColumn label="ID" prop="id" :is="ElInput" :rules="idRules"></ElEditTableColumn>
            <ElEditTableColumn label="性别" prop="gender" :is="ElSelect" :data="selectData" optionLabel="label"
                optionValue="value" :rules="genderRules">
            </ElEditTableColumn>
        </ElEditTable>

        <ElButton @click="save" type="primary">保存</ElButton>
    </div>
</template>
<script setup lang="ts">
import { ElEditTable, ElEditTableColumn } from "@howuse/element-plus-edit-table"
import { ElInput, ElSelect, ElButton } from "element-plus"
import { ref, unref } from 'vue';

const myTable = ref();

const idRules = [
    { required: true, message: '请输入ID', trigger: 'change' }
]
const genderRules = [
    { required: true, message: '请选择性别', trigger: 'change' }
]

const selectData = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

const data = ref([
    { id: 11, gender: 1 },
])

function save() {
    unref(myTable).validate().then(() => {
        alert(JSON.stringify(unref(data)))
    })
}
</script>
<style scoped></style>

切换编辑状态

操作按钮需要在 视图状态 编辑状态均展示，一般需要此操作时，需要增加 allDisplay 属性

<template>
    <div class="vp-raw">
        <ElEditTable v-model:data="data" ref="myTable" :rules="rules">
            <ElEditTableColumn label="ID" prop="id" :is="ElInput"></ElEditTableColumn>
            <ElEditTableColumn label="性别" prop="gender" :is="ElSelect" :data="selectData" optionLabel="label"
                optionValue="value">
                <template #view="{ text }">
                    <ElTag type="success" v-if="text === 1">男</ElTag>
                    <ElTag type="danger" v-else>女</ElTag>
                </template>
            </ElEditTableColumn>
            <ElEditTableColumn label="操作" prop="operation" allDisplay>
                <template #default="{ row, edit, $index }">
                    <el-button class="el-form-item" link @click="editRow(row, edit, $index)">{{ edit ? '保存' : '编辑'
                    }}</el-button>
                </template>
            </ElEditTableColumn>
        </ElEditTable>

        <el-space>
            <ElButton type="primary" @click="toggleEditStatus()">{{ isEdit ? '保存全部' : '编辑全部' }}</ElButton>
        </el-space>
    </div>
</template>
<script setup lang="ts">
import { ElEditTable, ElEditTableColumn } from "@howuse/element-plus-edit-table"
import { ElInput, ElSelect, ElButton, ElSpace, ElMessage, ElTag } from "element-plus"
import { ref, unref } from 'vue';

const myTable = ref();
const isEdit = ref(true);

const rules = {
    id: [
        { required: true, message: '请输入ID', trigger: 'change' }
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ]
}

const selectData = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

const data = ref([
    { id: 1, gender: 1 },
    { id: 2, gender: 2 },
])

function toggleEditStatus() {
    isEdit.value = !isEdit.value
    unref(myTable).toggleEditStatus({ edit: isEdit.value, $index: -1 })
}

async function editRow(row, edit, $index) {
    if (edit) {
        unref(myTable).validate().then(() => {
            ElMessage.success('保存成功')
            unref(myTable).toggleEditStatus({ edit: !edit, $index: $index })
        }).catch(err => {
            ElMessage.error(err.message)
        })
    } else {
        unref(myTable).toggleEditStatus({ edit: !edit, $index: $index })
    }

}
</script>
<style scoped></style>

混合状态

兼容原有ElTable的选项，不需要编辑状态可直接用ElTableColumn代替ElEditTableColumn

<template>
    <div class="vp-raw">
        <ElEditTable v-model:data="data" ref="myTable" :default-status="'edit'">
            <ElTableColumn label="ID" prop="id"></ElTableColumn>
            <ElEditTableColumn label="性别" prop="gender" :is="ElSelect" :data="selectData" optionLabel="label"
                optionValue="value">
            </ElEditTableColumn>
        </ElEditTable>
    </div>
</template>
<script setup lang="ts">
import { ElEditTable, ElEditTableColumn } from "@howuse/element-plus-edit-table"
import { ElSelect, ElTableColumn } from "element-plus"
import { ref } from 'vue';

const myTable = ref();
const isEdit = ref(true);

const selectData = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

const data = ref([
    { id: 11, gender: 1 },
])
</script>
<style scoped></style>

Api

兼容element-plus table 所有属性，参考element-plus-table-api

ElEditTable

属性

属性名	说明	类型	默认值
v-model:data	数据列表	Array	[]
defaultStatus	当前展示状态 'edit'/'view'	'edit' | 'view'	'edit'

ElEditTableColumn

属性

属性名	说明	类型	默认值
is	组件名称	Component	-
rules	校验规则，参考element-plus/form	[]	-
data	额外数据，下拉框等可用	[]	[]
optionLabel	下拉框标签对应键名称	[]	undefined
optionValue	下拉框值对应键名称	[]	undefined
formItemProps	表单选项属性	Object	{}
allDisplay	是否在编辑和使徒状态均展示该按钮操作	boolean	false

插槽

属性名	说明	类型	默认值
default	编辑状态内容	-	-
view	视图状态内容	-	-