vue3+ts+elementui-plus二次封装树形表格

news2024/10/2 12:31:09

复制粘贴即可:

一、定义table组件

<template>
	<div class='main'>
		<div>
			<el-table ref="multipleTableRef" :height="height" :default-expand-all="isExpend" :data="treeTableData"
				style="width: 100%; margin-bottom: 20px" row-key="id" border>
				<el-table-column :width="item.width" :fixed="item.fixed" show-overflow-tooltip align="center"
					v-for="(item, i) in treeTableProps" :key="i" :label="item.label">
					<template #default="scope">
						<!-- 自定义插槽展示 -->
						<slot v-if="item.slot" :name="item.prop" :scope="scope"></slot>
						<!-- 非自定义处理(判空) -->
						<span v-else-if="scope.row[item.prop] === '' || scope.row[item.prop] === null">--</span>
						<!-- 非自定义处理(正常展示) -->
						<span v-else>{{ scope.row[item.prop] }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
interface Props {
	// 属性名
	prop: string,
	// 属性标签
	label: string,
	// 是否固定(非必填)
	fixed?: boolean,
	// 行宽(非必填)
	width?: number,
	// 是否显示插槽(非必填)
	slot?: boolean,
}
const props = defineProps({
	/** 表格数据 */
	treeTableData: {
		type: Array,
		default: null,
		required: true
	},
	/** 表格属性 */
	treeTableProps: {
		type: Array<Props>,
		default: null,
		required: true
	},
	/** 是否默认全部展开 */
	isExpend: {
		type: Boolean,
		default: false,
		required: false
	},
	/** 表格高度 */
	height: {
		type: String,
		default: '60vh',
		required: false
	}
})

onMounted(() => {
})

</script>
<style scoped lang='less'>
//添加你想设置的样式
</style>

二、在父组件中使用

<template>
  <div class='main'>
    <TableTree :treeTableData="tableData" :treeTableProps="treeTableProps">
      <!-- 插槽展示 -->
      <template #address>
        <el-input size="small" placeholder="Type to input" />
      </template>
    </TableTree>
  </div>
</template>

<script lang='ts' setup>
import TableTree from '@/components/BaseTableTree/index.vue'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 定义表格数据接口
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}
// 定义表格头部属性名
const treeTableProps = [
  { prop: 'date', label: '日期', width: 300, fixed: true, },
  { prop: 'name', label: '名称', },
  { prop: 'address', label: '地址', slot: true, },
]
// 定义表格假数据
const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-04',
    name: '',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: '小明',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: '小明',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: '小明',
        address: 'No. 189, Grove St, Los Angeles',
        children: [
          {
            id: 311,
            date: '2016-05-01',
            name: '小明',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 312,
            date: '2016-05-01',
            name: '小明',
            address: 'No. 189, Grove St, Los Angeles',
          }
        ]
      },
      {
        id: 32,
        date: '2016-05-01',
        name: '小明',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: '小明',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
onMounted(() => {
})

</script>

三、运行查看效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/788099.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IL汇编字符串连接

在此实现了一个基本的IL汇编程序&#xff1b; 了解MSIL汇编和IL汇编评估堆栈_bcbobo21cn的博客-CSDN博客 它用了下面两句来在屏幕输出字符串&#xff0c; ldstr "I am from the IL Assembly Language..." call void [mscorlib]System.Console::WriteLine (string) …

Ros终端出现找不到bash: /home/***/devel/setup.bash: 没有那个文件或目录

现象&#xff1a;Ros终端出现找不到bash: /home/***/devel/setup.bash: 没有那个文件或目录 问题&#xff1a;配置时路径写错 解决方法&#xff1a;改正路径 1.打开文件 gedit ~/.bashrc2.修改正确路径

Day 42算法记录| 动态规划 08

这里写目录标题 139. 单词拆分多重背包问题背包问题总结 139. 单词拆分 单词就是物品&#xff0c;字符串s就是背包 1.dp[0]背包啥也不要用装&#xff0c;true。 2. for循环&#xff0c;顺序很重要&#xff0c;所以先背包再物品 如果求组合数就是外层for循环遍历物品&#xff0…

UG\NX二次开发 遍历部件中所有表达式

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 遍历部件中所有表达式 效果: 代码: #include "me.hpp" #include <uf_defs.h> #include <NXOpen/NXException.hxx> #include <NXOpen/Session.hxx> #include <NXO…

java根据模板导出word

java根据模板导出word 日常开发中&#xff0c;常常会遇到各种各样的表格进行导出&#xff0c;比较好的办法就是提前弄好word模版&#xff0c;再通过遍历的方式进行导出文档 1、制作word模版 模版编写 内容替换 目标下面模版进行多页展示 将word转换成xml 将xml格式化 再将x…

FTP文件传输工具:简单、高效、实用的数据传输方式

在当今的信息化社会&#xff0c;数据已经成为各行各业的重要资产&#xff0c;而数据的传输和交换则是数据价值的体现。在很多场景中&#xff0c;企业需要传输或接收大文件&#xff0c;比如设计图纸、视频素材、软件开发包、数据库备份等。这些文件的大小通常在几百兆字节到几十…

版本控制泄露代码

在文章的开头我们首先得了解什么是版本控制 在实际的开发过程中&#xff0c;我们会用到两个工具来进行版本控制和代码托管&#xff0c;它们分别是git和svn。 而在CTF中我们主要面对的就是git或svn的版本控制泄露。 &#xff08;1&#xff09;在使用 SVN 管理本地代码过程中&am…

在拦截器中使用redis报错空指针

问题 当在拦截器中使用 redis 时&#xff0c;获取不到 RedisTemplate 对象 原因 拦截器在SpringContext初始化之前就执行了&#xff0c;即Bean初始化之前它就执行了&#xff0c;所以肯定是无法获取SpringIOC容器中的内容的 解决 提前实例化拦截器 在配置类里面先实例化拦截…

vue2项目迁移到vue3中的改动——vuex部分——基础积累2

pinia中文文档里面有关于vuex的部分&#xff1a; Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起&#xff0c;最初的原则仍然相同&#xff0c;但 Pinia 对 Vue 2 和 Vue 3 都有效&#xff0c;并且不需要您使用组合 API。 除了安装和 SSR 之外&…

【使用时空RBF-NN进行非线性系统识别】实现了 RBF、分数 RBF 和时空 RBF 神经网络,用于非线性系统识别研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 2.1 算例1 2.2 算例2 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 本文用于非线性系统识别任务的径向基函数神经网络&#xff08;RBF-NN&#xff09;的三种变体。特别是&#xff0c;我实现…

Cesium态势标绘专题-正多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

Android OpenGL 教程——窗口初始化绘制矩形

上节介绍了 Native 工程初始化&#xff0c;但是我们的窗口什么都没有&#xff0c;这节我们将 NativeActivity 创建的 window 绑定到 OpenGL 创建的 display 的 surface 上&#xff0c;并且绘制背景颜色和三角形&#xff0c;通过三角形绘制出一个矩形 显示系统创建 void Rende…

app专项性能测试测试指标和测试方法

工作中没有做过app这块的性能测试&#xff0c;但是你有面试问到过&#xff0c;现在做个总结如下 1、首次加载&#xff08;冷启动&#xff09; A.使用logcat监控activitymanager B.adb shell am start -w C.人工秒表计数 2、非第一启动&#xff08;热启动&#xff09; 应…

【开发心得】百度终于向百度发起挑战

没错&#xff0c;题目的确读起来别扭&#xff0c;但事实如此。 第一个百度&#xff0c;说的是百度的“文心千帆”。&#xff08;以下简称“千帆”&#xff09; 第二个百度&#xff0c;说的是百度的“搜索引擎”。&#xff08;以下简称“搜索”&#xff09; 这么讲就容易理解…

深入了解数据库的索引分类以及回表查询原理

索引的分类 在InnoDB存储引擎中的又可以分为以下两种 聚集索引的选取规则 如果有主键&#xff0c;主键索引就是聚集索引。 如果不存在主键&#xff0c;将会使用第一个唯一&#xff08;UNIQUE&#xff09;索引作为聚集索引 如果表没有主键&#xff0c;或者没有合适的唯一索引…

机场室内定位导航系统解决方案:提升旅客体验和机场运营效率

旅游业已开始回暖&#xff0c;作为旅客流动的核心节点&#xff0c;正逢暑假亲子出行&#xff0c;日益增长的客流量会对机场的运营和管理带来相当的冲击和挑战。 为提升旅客的出行体验和机场的优化运营管理效率&#xff0c;华安联大推荐采用机场室内定位导航系统解决方案。 基于…

【力扣刷题 | 第二十二天】

目录 前言&#xff1a; 63. 不同路径 II - 力扣&#xff08;LeetCode&#xff09; 343. 整数拆分 - 力扣&#xff08;LeetCode&#xff09; 总结&#xff1a; 前言&#xff1a; 今天我们爆刷动态规划章节的题目&#xff0c;相关的算法理论介绍我也有写过文章&#xff1a;【夜…

TCL(Tool Command Language)学习(一)-----基本指令

一、置换语句 变量置换$ TCL解释器会将认为$后面为变量名&#xff0c;将变量置换乘它的值&#xff0c; []命令置换、[]内是一个独立的TCL语句 \反斜杠置换 换行符。空格、[、$等被TCL解释器当作特殊符号对待的字符&#xff0c;加上反斜杠后变成普通字符 “”CL对双引号中…

Rocket-Spring Cloud Stream

一.Spring Cloud Stream简介 1.微服务中会经常使用消息中间件&#xff0c;通过消息中间件在服务与服务之间传递消息&#xff0c;例如RabbitMQ、Kafka和RocketMQ&#xff0c;无论使用哪一种消息中间件和服务之间都有一点耦合性&#xff0c;这个耦合性指的是原来使用RabbitMQ&am…

Python获取股票数据——以沪深300成分股为例

目录 1、Baostock2、Tushare pro版3、AKshare4、聚宽量化平台 需求是下载比如从2020-01-01到2022-12-31区间的沪深300成分股每支股票的日K线数据&#xff0c;没错这是个面板数据&#xff0c;原本以为直接通过Python接口可以直接下载到&#xff0c;因为之前找的上证综指啥的用R的…