lk-component-element

lk-component-element

基于 Vue 3 + Element Plus 的业务组件库，提供表格和表单的快速封装组件。 该组件基于element-plus封装，请务必提前安装element-plus。

安装

pnpm add lk-component-element

快速开始

在 main.js 中全局注册：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import lkComponentElement from 'lk-component-element'
import 'lk-component-element/lk-component-element.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(lkComponentElement)
app.mount('#app')

组件列表

test-button

演示用测试按钮组件。

<test-button />

lk-datatable

前端分页表格组件。传入完整数据，组件内部自动完成分页切片。

Props

Events

Slots

columns 配置

const columns = [
    { prop: 'name', label: '姓名', width: '120' },
    { prop: 'email', label: '邮箱', emptyText: '未填写' },
    { prop: 'remark', label: '备注', emptyText: '暂无' },
    { type: 'action', label: '操作', width: '180', fixed: 'right' }
]

示例

<template>
    <lk-datatable
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :data="tableData"
        :columns="columns"
        title="用户列表"
    >
        <template #toolbar>
            <el-input placeholder="搜索..." style="width: 200px" />
        </template>
        <template #action="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
    </lk-datatable>
</template>

lk-datatable-server

后端分页表格组件。数据由外部请求获取，组件只负责展示和分页事件触发。

Props

Events

Slots

与 lk-datatable 相同（toolbar、action）。

示例

<template>
    <lk-datatable-server
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :data="tableData"
        :total="total"
        :loading="loading"
        :columns="columns"
        title="用户列表"
        @page-change="fetchData"
        @size-change="fetchData"
    />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)

const columns = [
    { prop: 'name', label: '姓名' },
    { prop: 'email', label: '邮箱' },
    { type: 'action', label: '操作', width: '180', fixed: 'right' }
]

const fetchData = async () => {
    loading.value = true
    const res = await api.getUsers({ page: page.value, pageSize: pageSize.value })
    tableData.value = res.list
    total.value = res.total
    loading.value = false
}

onMounted(fetchData)
</script>

lk-autoform

自动渲染表单组件，支持 20+ 种 Element Plus 字段类型和分步表单。

Props

标注 — 的属性默认值为 undefined，即使用 Element Plus 自身默认值。

Events

Slots

Expose 方法

字段级回调

写在 fields 配置的顶层（与 field、label、type 同级）：

{
  field: 'role',
  label: '角色',
  type: 'select',
  params: {
    options: [...],
    onFocus: (e) => console.log('获得焦点'),
    onBlur: (e) => console.log('失去焦点')
  },
  onChange: (value, model) => {
    // 选择访客时自动关闭启用状态
    if (value === 'guest') model.status = false
  }
}

fields 配置结构

每个字段包含四个顶层属性和一个 params 对象：

{
  field: 'fieldName',     // 字段名，对应 modelValue 中的 key
  label: '字段标签',       // 表单标签
  type: 'input',          // 字段类型
  params: { ... },        // Element Plus 组件的所有参数
  visibleIf: { ... },     // 可选，条件显示
  onChange: (value, model) => { ... }  // 可选，值变化回调
}

支持的字段类型

普通表单示例

<template>
    <lk-autoform
        v-model="formData"
        :fields="fields"
        label-width="100px"
        submit-text="保存"
        @submit="handleSubmit"
    />
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({ name: '', role: '' })

const fields = [
    {
        field: 'name',
        label: '姓名',
        type: 'input',
        params: {
            placeholder: '请输入姓名',
            rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
        }
    },
    {
        field: 'role',
        label: '角色',
        type: 'select',
        params: {
            placeholder: '请选择角色',
            options: [
                { label: '管理员', value: 'admin' },
                { label: '编辑', value: 'editor' }
            ]
        }
    }
]

const handleSubmit = (data) => {
    console.log('提交:', data)
}
</script>

分步表单示例

<template>
    <lk-autoform
        v-model="formData"
        :fields="fields"
        :steps="steps"
        v-model:current-step="currentStep"
        submit-text="提交申请"
        @submit="handleSubmit"
    />
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Reading, CircleCheck } from '@element-plus/icons-vue'

const currentStep = ref(0)
const formData = ref({ name: '', education: '', school: '' })

const fields = [
  { field: 'name', label: '姓名', type: 'input', params: { placeholder: '请输入姓名' } },
  { field: 'education', label: '学历', type: 'select', params: { options: [...], placeholder: '请选择' } },
  {
    field: 'school',
    label: '学校',
    type: 'input',
    params: { placeholder: '请输入学校' },
    visibleIf: { education: ['bachelor', 'master', 'phd'] }  // 支持数组匹配
  }
]

const steps = [
  { title: '基本信息', description: '填写个人资料', icon: Edit, fields: ['name'] },
  { title: '教育背景', description: '学历信息', icon: Reading, fields: ['education', 'school'] },
  { title: '确认提交', description: '核对信息', icon: CircleCheck, fields: ['education', 'school'] }
]
</script>

visibleIf 条件显示

visibleIf 写在字段顶层（与 field/label/type 同级），支持三种写法：

// 单值匹配
visibleIf: { education: 'bachelor' }

// 数组匹配（满足任一即可）
visibleIf: { education: ['bachelor', 'master', 'phd'] }

// 函数自定义
visibleIf: (modelValue) => modelValue.age >= 18

// 多条件（全部满足）
visibleIf: { working: true, department: 'tech' }