vue2+element嵌套表格+多选（连续选择待改进）+表格样式修改

已于 2023-01-29 14:04:30 修改
阅读量2.2k 收藏 2
点赞数
文章标签： vue.js elementui javascript
于 2022-07-20 15:04:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58412143/article/details/125891809
版权
本文介绍了如何在Vue2项目中结合ElementUI实现嵌套表格和多选功能。通过设置表格类型为expand并调整样式隐藏展开符，实现了默认展开所有行。同时，详细阐述了数据绑定、监听以及删除数据的操作，并提到了外部全选框的实现，但连续选择功能仍有待优化。
摘要由CSDN通过智能技术生成

HTML 

使用的是展开行type="expand"，并在样式里隐藏展开符，默认展开 :default-expand-all="true"

<template>
	<div class="ca-app-container">
		<!-- 顶部 -->
		<div class="cover">
			<veryTop></veryTop>
		</div>
		<!-- tabs -->
		<div class="tabs" v-show="diaogShow&&diaogShowSea">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="普通" name="first"></el-tab-pane>
				<el-tab-pane label="海外购" name="second"></el-tab-pane>
				<!-- <el-tab-pane label="订购" name="third"></el-tab-pane> -->
			</el-tabs>
		</div>
		<div class="noList" v-if="paramsList.length===0">
			<img src="../../assets/noList.png">
			购物车空空的哦~，去看看心仪的商品吧~
		</div>
		<div class="c-content" v-show="diaogShow&&diaogShowSea" v-else>
			<!-- 表头 -->
			<!-- <div class="cart-table-th">
        <span class="th th-item">商品信息</span>
        <span class="th th-info">&nbsp;</span>
        <span class="th th-type">规格</span>
        <span class="th th-price">单价</span>
        <span class="th th-amount">数量</span>
        <span class="th th-sum">金额</span>
        <span class="th th-op">操作</span>
      </div> -->
			<div class="J_OrderList">
				<!-- 表格 		@select="handleSelectionChange"		 -->
				<el-table :data="paramsList" ref="tableF" @selection-change="testhandChange" :row-key="getRowKey"
					:default-expand-all="true" @select="Selection">
					<el-table-column type="expand">
						<el-table-column :reserve-selection="true" width="55" type="selection"
							:selectable='handleCheckbox1'>
						</el-table-column>
						<el-table-column :reserve-selection="true" width="255">
							<template slot-scope="scope">
								<span class="titleNameOne"> 店铺：{
  {scope.row.name}}</span>
							</template>
						</el-table-column>
						<el-table-column type="expand">
							<template slot-scope="scope">
								<div class="titleName">
									<!-- 第二层表格 :ref="'tableChildSon' + scope.$index" ref="multipleTable" @select="handleSelectionChange3"-->
									<el-table :ref="'tableChildSon' + scope.row.id" :data="scope.row.goodsList"
										:default-expand-all="true" @select="itemHandleSelection"
										@selection-change="testhandChange3" :row-key="getRowKeyTwo">
										<el-table-column type="selection" :reserve-selection="true"
											:selectable='handleCheckbox3' width="45" align="center" size="45">
										</el-table-column>
										<el-table-column>
											<template slot-scope="scopeSon">
												<div class="o-main">
													<div class="main-left">
														<!-- 第3层表格 -->
														<el-table :data="scopeSon.row.spuList" :show-header="false"
															:default-expand-all="true" :row-key="getRowKeyThree">
															<el-table-column width="180" align="center">
																<template slot-scope="scopeSons">
																	<div class="main-left-img"
																		@click="toGood(scopeSon.row)"
																		v-if="scopeSons.row.image===''">
																		<img :src="scopeSon.row.exhibition" />
																	</div>
																	<div class="main-left-img" v-else
																		@click="toGood(scopeSon.row)">
																		<img :src="scopeSons.row.image" />
																	</div>
																</template>
															</el-table-column>
															<!-- :show-overflow-tooltip="true" -->
															<el-table-column align="center" prop="name" label="商品信息"
																width="230">
																<div class="goodName">
																	{
  {scopeSon.row.name}}
																</div>
															</el-table-column>
															<el-table-column align="center" width="330" label="规格"
																prop="skuNames">
																<template slot-scope="scopeSons">
																	<div class="main-right-F">
																		<div class="main-header">
																			{
  {scopeSons.row.skuNames}}
																		</div>
																	</div>
																</template>
															</el-table-column>
															<el-table-column width="100" label="单价" prop="price">
																<template slot-scope="scopeSons">
																	￥{
  {scopeSons.row.price}}
																</template>
															</el-table-column>
															<el-table-column width="210" label="数量" prop="num">
																<template slot-scope="scopeSons">
																	<!-- ￥{
  {scopeSons.row.num}} -->
																	<el-input-number v-model="scopeSons.row.num"
																		size="mini"
																		@change="handleChange(scopeSons.row)" :min="1"
																		label="描述文字"
																		:disabled="scopeSons.row.isStock==0?true:false">
																	</el-input-number>
																</template>
															</el-table-column>
															<el-table-column width="120" label="金额" prop="totalPrice">
																<template slot-scope="scopeSons">
																	<div class="totalPrice">
																		￥{
  {scopeSons.row.totalPrice}}
																	</div>
																</template>
															</el-table-column>
															<el-table-column label='操作' width="160">
																<template slot-scope="scope">
																	<div class="curporF">
																		<!--v-if="item.isStock==0"> -->
																		<div class="curpor handle-txt"
																			style="background-color: #5799de;color: #fff;"
																			v-if="scope.row.isStock==0">
																			已售罄
																		</div>
																		<!-- <div class="curpor handle-txt" @click="deleteShops(item)"> -->
																		<div class="curpor handle-txt"
																			@click="deleteShops(scope.row)">
																			删除
																		</div>
																		<!-- <div class="curpor handle-txt" @click="addCollection(item)"> -->
																		<div class="curpor handle-txt"
																			@click="addCollection(scope.row)">
																			移入收藏夹
																		</div>
																	</div>
																</template>
															</el-table-column>
														</el-table>
													</div>
												</div>
											</template>
										</el-table-column>
									</el-table><!-- 2 -->

								</div>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column type="" label="商品信息" align="center" width="100" class="tile"></el-table-column>
					<el-table-column label="规格" width="380" align="center"></el-table-column>
					<el-table-column label="单价" width="80" align="center"></el-table-column>
					<el-table-column label="数量" align="center" width="180"></el-table-column>
					<el-table-column label="金额" align="center" width="180"></el-table-column>
					<el-table-column label="操作" align="center" width="155"></el-table-column>
					<!-- <el-table-column label="操作" align="center" width="415" style="margin-left: -100rem;"></el-table-column> -->
				</el-table>
			</div>
			<!-- </div> -->
			<div class="float-bar-wrapper">
				<div class="select-all" v-if="this.natureIndex==0">
					<el-checkbox-group v-model="allType" @change="handleCheckAllChange">
						<el-checkbox label="全选" name="type" :checked="allType" style=""></el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="operations">
					<span class="operations-item" @click="batchDelete()">全部删除 </span>
					<!-- <span class="operations-item" @click="batchColle()">移入收藏夹</span> -->
				</div>
				<div class="float-bar-right">
					<div class="amount-sum">
						<span>已选商品</span>
						<span>{
  {this.shoped}}</span>
						<span>件</span>
					</div>
					<div class="price-sum">
						<span>合计：{
  {this.priceed.toFixed(2)}}</span>
					</div>
					<div class="btn-area">
						<el-button class="btn-area-elbtn" type="info" round @click="buy" :plain="true">结算</el-button>
					</div>
				</div>
			</div>

		</div>
		<el-dialog :visible.sync="dialogVisibleAllDel" width="30%">
			<div class="cart-el-dialog-content">
				<span>确定全部删除吗？</span>
			</div>
			<span class="dialog-footer">
				<el-button @click="dialogVisibleAllDel = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 结算组件 -->
		<div class="">
			<confirm v-show="!diaogShow" :infoShow.sync="diaogShow" ref="mychild"
				:dialogFormVisible.sync="dialogFormVisible" :user="user" />

			<overseasConfirm v-show="!diaogShowSea" :infoShowSea.sync="diaogShowSea" ref="mychildSea"
				:dialogFormVisibleSea.sync="dialogFormVisibleSea" :userSea="userSea" />
		</div>
		<div class="footer">
			<!-- <Footer></Footer> -->
		</div>
		<!-- 返回顶部 -->
		<div class="backtop">
			<el-backtop :bottom="100" :visibility-height="100"></el-backtop>
		</div>
	</div>
</template>

css

  //表头
  .el-table__header-wrapper{
    // margin-left: -50% !important;
    color: #000000;
    font-family: '宋体';
    font-weight: bold;
    background-color: #f5f7fa !important;
  }
  .el-table thead tr th{
            border: 0px solid #ddd!important;
           // border-top-left-radius: 10px;
           // border-top-right-radius: 10px;
        }
  //多选框
  .el-table__header-wrapper{
    .el-checkbox__inner{
       display: none;
最低0.47元/天 解锁文章
weixin_58412143
关注
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
08-01
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
vue使用Element的el-table实现表格嵌套及表格内容的折叠效果
weixin_42841605的博客
06-29 1万+
vue+element，使用el-table实现表格嵌套及表格内容的折叠收起效果
vue+element-ui 表格嵌套表格实现和勾选问题解决
陈怂怂的博客
03-03 8382
vue+element-ui 表格嵌套表格的实现 主要是根据element-ui提供的type="expand"属性来实现，数据都是写死的数据哈~~~ <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="children" type="expand"> <template slot-scope="slots
antDesign Vue 实现表单嵌套表格，可以添加和删除，校验
最新发布
weixin_51093213的博客
09-18 556
1.name属性是:name="['dataSource', index, 'name']"，整个form绑定的是formData，table绑定的是formData.dataSource。2. v-model:value="record['name']" ，record是这行数据。注意：formData里面dataSource里面是表单校验，其他是其他表单组件。2. 可以实现输入时，校验输入内容，在点击确定时，校验整体格式。1. 可以添加行、删除行。
保姆级教程：Ant Design Vue中 a-table 嵌套子表格
热门推荐
m0_56118578的博客
12-16 1万+
Ant Design Vue中 a-table 嵌套子表格 及只打开一个嵌套表格的方法
VUE嵌套子表格
Carri_li的博客
04-11 741
/如果没出现则截取所有id,添加点击id，0到1，针对已经有一个展开，点另一个会进入判断。//数组长度小于0，说明都没展开，第一次点击，id添加到数组，数组有谁的id谁就展开。//如果出现则截取这个id,1d到1相当于0，针对重复点击一个。//返回某个指定的字符串值在字符串中首次出现的位置，下标为0。//进这个判断说明当前已经有展开的了。
element表格之表头代码改进
S2763427717的博客
08-31 233
element表头代码改进
vue+element-ui实现表格编辑的三种实现方式
10-17
本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格进行编辑，以及直接通过样式控制实现编辑功能。以下分别对这三种实现方式进行详细的阐述。 ### ...
利用vue + element实现表格分页和前端搜索的方法
01-19
本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 实现思路 1.前端后台管理会存在很多表格,表格数据过多就需要分页; 2.前端...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
vue+element实现sku表格
02-12
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU（Stock Keeping Unit）表格。Vue.js是一个轻量级、高性能的前端开发框架，而Element UI则是一套为开发者、设计师和产品经理...
Vue+ElementUI中表格嵌套的使用方法
m0_66722601的博客
02-21 5956
Vue+ElementUI中表格嵌套的使用方法
Vue ElementUI中el-table表格嵌套样式问题
lemon今天学习了吗？的博客
02-05 3885
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了，实际上接口数据并不是都有children数组；1、两个表格嵌套，当父表格有children数组时子表格才展示；2、在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；2、子表格数据少于父表格展示字段，且对应固定操作列不同；3、父表格的操作列固定在右侧影响了子表格的显示；4、滑动到表格底部时，父子表格的固定列对不齐；
Vue + Element实现表格嵌套表格
qq_42753983的博客
09-14 1164
Vue表格嵌套表格
表格(el-table)里面嵌套表格(el-table)
song_song0927的博客
01-03 9094
表格内嵌套表格
vue el-table 中 嵌套 ＜el-select＞ 选择器
weixin_44941581的博客
10-13 544
【vue】Dialog嵌套表格并且可编辑或可多选
m0_46459413的博客
04-03 1150
【vue】Dialog嵌套表格并且可编辑或可多选
【项目复盘-Vue2】element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选
Weiqian_的博客
04-13 3861
element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选
VUE+table表格里面嵌套输入框：
zhu_tian_huan的博客
05-19 1970
table表格里面加输入框
vue怎么实现表格多选行数据
04-28
在 Vue 中实现表格的多选行数据，一般有两种方式： 1. 使用 Checkbox 实现：在每一行数据前添加一个 Checkbox，然后将选中的行的数据存储到一个数组中。具体实现可以参考以下代码： ```html <template> <div> <table> <thead> <tr> <th> <input type="checkbox" v-model="allChecked" @change="checkAll" /> </th> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="item.id"> <td> <input type="checkbox" v-model="checkedList" :value="item" /> </td> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: "Tom", age: 18 }, { id: 2, name: "Jerry", age: 20 }, { id: 3, name: "Mike", age: 22 } ], checkedList: [], allChecked: false }; }, methods: { checkAll() { if (this.allChecked) { this.checkedList = [...this.list]; } else { this.checkedList = []; } } } }; </script> ``` 2. 使用表格的 row-click 事件实现：在表格中添加一个 row-click 事件，当用户选中某一行时，将该行的数据存储到一个数组中。具体实现可以参考以下代码： ```html <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="item.id" @click="handleClick(item)"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { list: [ { id: 1, name: "Tom", age: 18 }, { id: 2, name: "Jerry", age: 20 }, { id: 3, name: "Mike", age: 22 } ], checkedList: [] }; }, methods: { handleClick(item) { const index = this.checkedList.findIndex(i => i.id === item.id); if (index > -1) { this.checkedList.splice(index, 1); } else { this.checkedList.push(item); } } } }; </script> ``` 这两种方式都可以实现表格的多选行数据，具体选择哪种方式可以根据实际情况进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值