当前位置: 首页 > news >正文

vue3+el-tale封装(编辑、删除、查看详情按钮一起封装)

// 封装源码(子组件)
<template><el-table :data="tableData" style="width: 100%"><el-table-columnv-for="(column, index) in tableDataHeader":label="column.label":key="index":prop="column.prop":width="column.width"><template #default="scope" v-if="column.operate"><el-buttonv-for="item in column.children":key="item.prop":type="item.type"@click="btnClick(item.method, scope.row, scope.$index)">{{ item.label }}</el-button></template></el-table-column></el-table>
</template><script setup lang="ts">
const props = defineProps<{tableData: Array<any>tableDataHeader: Array<any>
}>()const emits = defineEmits(['deleteRow', 'editRow', 'detailRow'])const btnClick = (method, row, index) => {console.log('method: ', method)emits(method, row, index)
}
</script><style scoped></style>
// 父组件调用
<template><CustomTable:tableData="tableData":tableDataHeader="tableDataHeader"@deleteRow="deleteRow"@editRow="edit"@detailRow="detail"></CustomTable>
</template><script setup lang="ts">
import { onMounted, reactive, ref, type Ref } from 'vue'
import CustomTable from '@/components/Custom-table.vue'
import { data } from '@/data/data.ts'const tableData: Ref<Array> = ref(data.tableData)
const tableDataHeader = ref(data.tableDataHeader)const deleteRow = (row: any, index: number) => {tableData.value.splice(index, 1)console.log('this tableData: ', tableData)pagenation.value.total = tableData.value.length
}
const edit = (row, index) => {console.log('row: ', row, index)
}
const detail = (row, index) => {console.log('row: ', row, index)
}
</script><style scoped></style>

对应的tableData和tableDataHeader文件(实际开发中,应该从后端拿tableData,tableHeader根据情况自定义)

export const data = {tableData: [{name: 'knife1',date: '2024-09-22',type: 'butterfly'},{name: 'knife2',date: '2024-09-22',type: 'M9'},{name: 'knife3',date: '2024-09-22',type: 'butterfly'}],tableDataHeader: [{label: 'Knife Name',prop: 'name',width: 180},{label: 'Favorite Date',prop: 'date',width: 180},{label: 'Knife Type',prop: 'type',width: 180},{label: 'Operation',operate: true,prop: 'Operation',width: '280',children: [{label: 'edit',prop: 'edit',method: 'editRow',type: 'primary'},{label: 'Delete',prop: 'Delete',method: 'deleteRow',type: 'warning'},{label: 'Detail',prop: 'Detail',method: 'detailRow',type: 'info'}]}]
}

http://www.mrgr.cn/news/12224.html

相关文章:

  • 【Liunx入门】Liunx换源
  • NASA数据集:MetOp-A ASCAT 第 2 级海洋表面风矢量,针对沿岸海洋进行了优化
  • 【深度学习与NLP】——深度卷积神经网络AlexNet
  • 【微信小程序】导入项目
  • AJAX(4)——XMLHttpRequest
  • C语言程序设计-联系篇
  • Mybatis框架基础
  • OpenCV入门12.2:SURF与SIFT比较及SURF示例
  • 如何在没有屏幕时间密码或 Apple ID 的情况下重置 iPhone
  • 【Tomcat】Tomcat10部署war包无法启动
  • 鸿蒙(API 12 Beta3版)【使用AVScreenCapture录屏取原始码流(C/C++)】视频播放与录制
  • 手写题之链式调用
  • 全方位解析红鲸音视频会议SDK助力系统功能集成
  • 作业0827
  • 搭建ELK-Filebeat采集系统日志
  • 使用SparkGraphX进行图计算时的编码问题
  • 如何完美实现 Go 服务的平滑升级
  • 8. 为什么 Java 中 HashMap 的默认负载因子是 0.75?
  • Unity 离线文档快速访问处理文件
  • 高效能低延迟:EasyCVR平台WebRTC支持H.265在远程监控中的优势