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, })