【element-动态列表格】

element-动态表格


一、动态表格

<el-table :data="tableList" style="width: 100%;" height="256" >
<template v-for="(item, index) in tableColumns">
    <el-table-column
        :key="index"
        align="center"
        :show-overflow-tooltip="true"
        sortable
        :prop="item.prop"
        :label="item.label"
        :show="item.show"
    />
</template>
</el-table>
tableColumns=[
	{
		prop:"date",
		label:"日期"show:true
	},
	{
		prop:"value",
		label:"数值"show:true
	}
],
tableList=[
	{
		date:"2022-01-01",
		value:'666'
	},
	{
		date:"2022-01-01",
		value:'666'
	}
]

注释:###########################################################################

以下是关于element-plus树状表格的使用方法及示例: ### 自定义图标 在开发使用Element Plus的树状表格时,默认的展开/收起图标可能不能满足设计需求,可通过覆盖样式的方式来自定义这些图标,能使表格更符合项目要求 [^1]。 ### 一键全部展开折叠功能 在vue3 + element-plus项目开发中,可实现el-table树形表格全部展开、全部折叠功能。当表格存在children多级子集时,点击按钮能将表格一键收起与一键折叠,采用智能切换方式,即当前是折叠状态就展开,如果是展开状态就折叠收起,还支持表格children数据懒加载情况(需要点击调用接口获取数据) [^2]。 ### 无线层级拖拽功能 使用vue3 + element plus可实现树状表格的拖拽排序功能。示例代码如下: ```vue <template> <el-table ref="tableRef" :data="tableData" row-key="id" style="width: 100%" :tree-props="tableTreeProps"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column fixed="right" label="操作" width="204" className="operationCloumn"> <template #default="scope"> <span @click="deleteClick(scope.row)">编辑</span> <span @click="deleteClick(scope.row)">{{scope.row.enable ? '停用' : '启用'}}</span> <span @click="deleteClick(scope.row)">删除</span> <i class="moveIcon iconfont icon-yidong-16px"></i> </template> </el-table-column> </el-table> </template> ``` 此代码展示了树状表格的基本结构,包含列定义和操作按钮等 [^3]。 ### 复选框勾选问题 树状表格的节点勾选需手动设置,调用elemet-plus库抛出的方法toggleRowSelection;表格里数据在显示的时候不能变动,否则会出现问题,在此期间不能更改每一行数据的值;表格没有暴露半选状态的方法,需要自行设置 [^4]。 ### 表格合并 在开发中若需进行表格合并,在ElementUI中可使用 “span-method” 属性值来控制表格的合并 [^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值