公司主页和公司网站,优购物官方网站app,拓者设计吧室内设计论坛,保定市住房和城乡建设厅网站vue3.2中的script setup语法
在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格;
这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格#xff1a;
子…vue3.2中的script setup语法
在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antd vue 中表格的slots配置项,通过配合插槽来进行封装自定义表格;
这次主要的一个功能是编辑之后变成input框 修改了之后变成完成发送请求重新渲染表格
子组件的代码这样封装不会改变antd 官网示例参数的传递方式
template
!-- v-bind处理a-table 传递过来的参数--a-table refKldTable classkld-table v-bindattrs!-- 处理 slots 动态渲染插槽需要使用这种方式--template v-forkey in renderArr #[key]{ record, column, text, index }!-- 通过这个插槽传递数据给父组件,做一些编辑提交的操作等等 --slot :namekey :texttext :columncolumn :recordrecord :indexindex/slot/template/a-table
/templatescript langts
import { ref,useSlots } from vue;import { Table } from ant-design-vue;
export default {name: KldTable,setup(_, { attrs, emit }) {
// 插槽的实例const slots useSlots()const renderArr Object.keys(slots)return {attrs,listeners: emit,KldTable: ref(),
renderArr };},components: {ATable: Table}
};
/script 父组件的使用子组件全局注册了所以父组件没有引入
templatekld-table :columnscolumns :data-sourcedataSource!-- 通过columns 里面对象来遍历生成 可编辑的组件, 不能编辑序号是因为是因为没有传过去slots , 所以及时columns里面包含序号,但是由于表格组件渲染插槽没有他,所以不会序号不可编辑,通过给操作自定义一个属性,来避免渲染生成操作--template v-slot:[item.dataIndex]{ record, text, column } v-foritem in columns!-- 通过v-for生成 因为每个选项都需要变成input框所以用遍历,但是操作一列有自己的方式所以不需要,于是我就在操作一列无需添加插件属性slots,表示他不一样 --div :keyitem.dataIndexspan v-if!record.isEditspan v-ifitem.type Select{{ getLabel(column.options, text) }}/spanspan v-else{{ text }}/span/spanspan v-elsea-input-number sizesmall v-model:valuerecord[item.dataIndex]v-ifitem.type inputNumber/a-input-numbera-select v-else-ifitem.type Select v-model:valuerecord[item.dataIndex]a-select-option v-foroption in column.options :keyoption.value :valueoption.value{{ option.label }}/a-select-option/a-selecta-input sizesmall v-else v-model:valuerecord[item.dataIndex]/a-input/span/div/template!-- 自定义表头样式 --template #headerCell{ column }template v-ifcolumn.dataIndex ResourceNamespansmile-outlined /{{ column.title }}/span/template/template!-- 自定义操作区域 --template #bodyCell{ column, record, index }template v-ifcolumn.dataIndex operationa-button :typerecord.isEdit ? primary : text clickeditPoint(record, column, index){{record.isEdit ? 完成 : 编辑 }}/a-buttonspan v-if!record.isEdita-button typetext详情/a-buttona-popconfirm placementtop ok-text确认 cancel-text取消template #titlep确定删除该扫描节点?/p/templatea-button typetext删除/a-button/a-popconfirm/spanspan v-elsea-button typetext clickcancelEdit(record)取消/a-button/span/template/template/kld-table
/template
script setup langts
// import MyTable from ./table.vue
import { SmileOutlined, } from ant-design/icons-vue;
import { message, SelectProps } from ant-design-vue;const isEdit refboolean(false)
const columns [{title: 序号,dataIndex: numbers,key: numbers,width: 6%},{title: 资源名称,dataIndex: ResourceName,slots: { customRender: ResourceName }, //slots这个是重点,通过这个相当于告诉表格组件我有一个具名插槽要用,名字就是customRender后面的名字, 父组件中的useSlots插槽的实例就有这个ResourceName,下面也一样width: 12%},{title: 资源名称IP,dataIndex: IP,slots: { customRender: IP },width: 12%},{title: 数据库类型,dataIndex: DatabaseType,slots: { customRender: DatabaseType },width: 12%},{title: 数据库名,dataIndex: Dbname,slots: { customRender: Dbname },width: 12%,},{title: Select选择器,dataIndex: Username,slots: { customRender: Username },width: 12%,type: Select,options: [] as any,},{title: 数字类型,dataIndex: Quantity,slots: { customRender: Quantity },width: 12%,type: inputNumber},{title: 操作,dataIndex: operation,}
]
const dataSource ref([{numbers: 1,Username: 1,Dbname: 测试2,DatabaseType: 3,ResourceName: ces1,IP: 3333,Quantity: 99}, {numbers: 2,Username: 2,Dbname: 测试2,DatabaseType: 8900,ResourceName: 777,IP: 55,Quantity: 101}
])
//当前组件挂载时设置初始 Select选择器的下拉数据
onMounted(async () {const i columns.findIndex((ele: any) ele.dataIndex Username);columns[i].options [{value: 1,label: 文本,},{value: 2,label: 数字,},];
});
const editPoint (record: any, column: any, index: any) {console.log(record, 666, column, index);if (isEdit.value) {message.warning(有其他项正在编辑,请先完成);} else {// 触发显示input框record.isEdit trueisEdit.value true}
}
// 取消编辑
const cancelEdit (record: any) {record.isEdit falseisEdit.value false
}
// 处理下拉数据回显
const getLabel (options: SelectProps[options], value: string) {if (options?.length ! 0 (value || value 0)) {return options.find((item) {return item.value value;})?.label;}
};
/script
效果图如下追加显示下拉选择器数字已经正常输入框 追加效果图 父组件中的删除详情取消完成按钮功能自行发挥这里就不写具体的操作细节父组件功能还在不断更新中
仅供参考如果有不对的还请各位大佬指教
