Vue3自定义组件（二）

1、目的        

        在Vue3自定义组件（一）中，我创建了一个简单的表格组件，只新增了一个表头显示，是最简单的组件实现，现在我想对表格做简单的增删改查，就需要进一步改动我的组件了。

2、实现

（1）首先我要展示具体信息的，那我就要有组件去展示，这里我选用了n-modal模态框组件，修改

CommonTable.vue文件：

<template>
    <h6>{{title}}</h6>
    <n-data-table
            :columns="tableColumns"
            :data="data"
            :pagination="pagination"
            :bordered="false"
    >
    </n-data-table>
    <n-modal
            ref="tableModalRef"
            :show="showModal"
            :mask-closable="false"
            preset="dialog"
            :title="modalTitle"
            positive-text="确认"
            negative-text="取消"
            @close="onCloseModal"
            @positive-click="onPositiveClick"
            @negative-click="onNegativeClick"
    >
        <n-form ref="formRef" :model="row">
            <n-form-item v-for="column in tableModalColumns"  :label="column.label">
                <n-input v-if="column.component=='NInput'" :value="selectData[column.field]" :disabled="!isEdit" :placeholder="column.componentProps.placeholder"/>
            </n-form-item>
        </n-form>
    </n-modal>
</template>
<script setup>
    import {NDataTable,useMessage,NModal,NInput,NForm,NFormItem} from "naive-ui"
    import {basicProps} from './props'
    import {unref,computed,reactive,ref,nextTick} from 'vue'

    const message=useMessage();
    const props = defineProps({
        ...basicProps
    });
    const title = unref(props.tableTitle) || '';
    const tableAction=reactive(props.actionColumns) || {};
    const tableColumns=reactive(props.columns) || [];
    //modal相应属性定义
    const showModal=ref(false);
    const modalTitle=unref(props.modalTitle) || '';
    const tableModalColumns=reactive(props.modalColumn) || [];

    //modal是否可编辑
    const isEdit=ref( false);
    //选中的信息
    const selectData=reactive({});
    const modalColums=unref(props.columns.filter((item)=>{
        return item.key!="action";
    })) || [];
    function onPositiveClick(){
        message.info("确认");
        showModal.value=false;

    }
    function onNegativeClick(){
        message.info("取消");
        showModal.value=false;

    }
    tableColumns.forEach(( item,index)=>{
        if(item.key=="action"){
            return;
        }
        if(index==tableColumns.length-1){
            tableColumns.push(props.actionColumns)
        }
    });
    function openModal(row,eidtFlag){
        message.info("打开编辑页面");
        if(eidtFlag){
            isEdit.value=eidtFlag;
        }else{
            isEdit.value=false;
        }
        showModal.value=true;
        Object.assign(selectData,row)
    }
    function onCloseModal(row){
        message.info("关闭页面");
        showModal.value=false;
    }


    //导出方法到外部使用
    defineExpose({
        openModal,
    })

</script>

同时还修改了组件中的props.ts文件，添加了几个参数：

import { NDataTable } from 'naive-ui';
export const basicProps = {
    ...NDataTable.props, // 这里继承原 UI 组件的 props
    //表格头名称
    tableTitle: {
        type: String,
        default: null,
    },
    //操作按钮信息
    actionColumns:{
        type: Object,
        default:{}
    },
    //编辑信息时显示头名称
    modalTitle: {
        type: String,
        default: null,
    },
    //操作数据类型
    operateType: {
        type: String,
        default: "",
    },
    //modal展示的columns
    modalColumn: {
        type: Array,
        default: [],
    },
}

（2）组件中我新增了一个modalColumn参数，这个是设置modal展示哪些字段的：

引用自定组件时，可以创建一个modalColumn.ts，然后设置展现信息：

import {NInput,} from 'naive-ui'

export const modalColumn=[
    {
        field: 'userAcc',
        component: 'NInput',
        label: '用户账号',
        componentProps: {
            placeholder: '请输入用户账号',
        },
        rules: [{ required: true, message: '请输入用户账号', trigger: ['blur'] }],
    },
    {
        field: 'userAcc',
        component: 'NInput',
        label: '用户名',
        componentProps: {
            placeholder: '请输入用户名',
        },
        rules: [{ required: true, message: '请输入用户名', trigger: ['blur'] }],
    },
    {
        field: 'createTime',
        component: 'NInput',
        label: '创建时间',
        componentProps: {
            placeholder: '请输入创建时间',
        },
        rules: [{ required: true, message: '请输入创建时间', trigger: ['blur'] }],
    },
    {
        field: 'lockFlag',
        component: 'NInput',
        label: '是否禁用',
        componentProps: {
            placeholder: '请输入是否禁用',
        },
        rules: [{ required: true, message: '请输入是否禁用', trigger: ['blur'] }],
    },
]

3、实现效果

这样就稍微把之前的组件完善了一下，但是也只是简单调整，后面继续优化它。 

踩过的坑：

（1）不知道如何展示n-modal的字段，因为不知道如何关联选中的值和展示的字段，最根本的原因是不知道如何动态根据一个key获取对象的值，最后才知道可以用object[key]的方式取值；

最终展示n-modal字段逻辑如下：

 

<n-form-item v-for="column in tableModalColumns"  :label="column.label">
    <n-input v-if="column.component=='NInput'" :value="selectData[column.field]" :disabled="!isEdit" :placeholder="column.componentProps.placeholder"/>
</n-form-item>

（2） n-modal顶部的X按钮不能使用，原因是没有配置对应的方法：

@close="onCloseModal"

（3）点击按钮页面没成功展示：

没有把展示页面方法导出：

//导出方法到外部使用
defineExpose({
    openModal,
})