安装

npm install jyfe-ui2

组件使用示例

<template>
    <div>
        <h1>用户列表</h1>
        <EnhancedDataTable
                :searchFields="searchFields"
                :tableColumns="tableColumns"
                :fetchData="fetchUserData"
                :showSelection="true"
                :showOperations="true"
                :operations="tableOperations"
                :checkPermission="checkPermission"
                @selection-change="handleSelectionChange"
        >
            <!-- 自定义搜索slot -->
            <template v-slot:customSearch="{ form, field }">
                <el-input v-model="form[field.prop]" :placeholder="field.placeholder">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </template>

            <!-- 自定义列slot -->
            <template #operateTable>
                <el-button>操作</el-button>
            </template>

            <!-- 自定义列slot -->
            <template v-slot:customColumn="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
                    {{ row.status }}
                </el-tag>
            </template>
        </EnhancedDataTable>
    </div>
</template>

<script>
import EnhancedDataTable from '@/components/table/EnhancedDataTable.vue'

export default {
    components: {
        EnhancedDataTable
    },
    data() {
        return {
            searchFields: [
                { label: '用户名', prop: 'username', type: 'input' },
                { label: '邮箱', prop: 'email', type: 'input' },
                {
                    label: '角色',
                    prop: 'role',
                    type: 'select',
                    fetchOptions: this.fetchRoleOptions
                },
                {
                    label: '地区',
                    prop: 'region',
                    type: 'cascader',
                    props: {
                        value: 'code',
                        label: 'name',
                        children: 'items'
                    },
                    fetchOptions: this.fetchRegionOptions
                },
                { label: '注册日期', prop: 'registrationDate', type: 'date' },
                { label: '活跃时间范围', prop: 'activeRange', type: 'datetimerange' },
                {
                    label: '状态',
                    prop: 'status',
                    type: 'radio',
                    options: [
                        { label: '全部', value: '' },
                        { label: '活跃', value: 'active' },
                        { label: '禁用', value: 'disabled' }
                    ]
                },
                {
                    label: '自定义搜索',
                    prop: 'customSearch',
                    type: 'slot',
                    slotName: 'customSearch',
                    placeholder: '请输入自定义搜索内容'
                }
            ],
            tableColumns: [
                { prop: 'id', label: 'ID', width: '80' },
                { prop: 'username', label: '用户名' },
                { prop: 'email', label: '邮箱' },
                { prop: 'role', label: '角色' },
                { prop: 'region', label: '地区' },
                { prop: 'registrationDate', label: '注册日期', formatter: this.formatDate },
                { prop: 'status', label: '状态', slot: true, slotName: 'customColumn' }
            ],
            tableOperations: [
                { name: '编辑', type: 'primary', handler: this.handleEdit },
                { name: '删除', type: 'danger', handler: this.handleDelete }
            ]
        }
    },
    methods: {
        async fetchUserData(params) {
            console.log('params:', params)
            // 模拟 API 调用
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        data: [
                            { id: 1, username: 'user1', email: '[email protected]', role: 'admin', region: '中国/广东/深圳', registrationDate: '2023-01-01', status: 'active' },
                            { id: 2, username: 'user2', email: '[email protected]', role: 'user', region: '中国/北京/朝阳', registrationDate: '2023-02-15', status: 'disabled' },
                        ],
                        total: 2
                    })
                }, 1000)
            })
        },
        async fetchRoleOptions() {
            // 模拟从服务器获取角色选项
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve([
                        { value: 'admin', label: '管理员' },
                        { value: 'user', label: '普通用户' },
                        { value: 'guest', label: '访客' }
                    ])
                }, 500)
            })
        },
        async fetchRegionOptions() {
            // 模拟从服务器获取地区选项
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve([
                        {
                            code: 'china',
                            name: '中国',
                            items: [
                                {
                                    code: 'guangdong',
                                    name: '广东',
                                    items: [
                                        { code: 'shenzhen', name: '深圳' },
                                        { code: 'guangzhou', name: '广州' }
                                    ]
                                },
                                {
                                    code: 'beijing',
                                    name: '北京',
                                    items: [
                                        { code: 'chaoyang', name: '朝阳' },
                                        { code: 'haidian', name: '海淀' }
                                    ]
                                }
                            ]
                        }
                    ])
                }, 500)
            })
        },
        formatDate(row, column, cellValue) {
            return new Date(cellValue).toLocaleDateString()
        },
        handleEdit(row) {
            console.log('Editing:', row)
        },
        handleDelete(row) {
            console.log('Deleting:', row)
        },
        handleSelectionChange(selectedRows) {
            console.log('Selected rows:', selectedRows)
        },
        checkPermission(permission, row) {
            // 这里应该实现实际的权限检查逻辑
            // 现在只是一个示例，始终返回 true
            return true
        }
    }
}
</script>