el-table中el-select(多选)嵌套使用

最新推荐文章于 2024-06-06 15:39:34 发布
最新推荐文章于 2024-06-06 15:39:34 发布
阅读量2.7k 收藏 6
点赞数 3
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47624213/article/details/128249123
版权

1. 描述使用

项目中使用element-ui的el-table组件，在el-table表格中使用el-select多选

在这里插入图片描述

2.遇到问题

官网中使用如下：v-model绑定的是data的一个变量，但是在表格中使用，会导致选择每一行的数据是同步的，完全一样；

在这里插入图片描述

3.解决问题

el-select的v-model绑定到每个行scope.row上面；每行独立显示，互不影响；

在这里插入图片描述

4.问题补充(二)

el-select多选：下发配置与回显保持一致；
下发配置：使用@change=”“事件(如上图)；事件传参(scope.row)，使用scope.row.column获取已选项并且给后端传参；
刷新界面回显：el-select的v-model绑定scope.row.column时已经指定回显

在这里插入图片描述

weixin_47624213
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue笔记】el-table中嵌套的el-select 的取值问题
qyq7777的博客
08-23 2836
前言 最近开始在公司实习，想记录一下自己遇到的一些问题和解决办法，不一定完全正确，还在学习中……如果有错误，欢迎批评指正，谢谢。 原型的要求是table中每一行都有一个select，且每一个select之间互不干扰 vue代码如下： 细节 【使用slot-scope=“scope”】 element-ui的官方解释是： 也就是说使用<template scope="scope">后，通过scope.row.键名，可以获取所在行的某一列...
el-select 多选
qq_45103475的博客
03-27 3269
多选关键字multiple HTML中的代码 <el-select multiple v-model="projBascInfoShow.projFlag" placeholder="请选择"> <el-option v-for="item in xmbsList" :key="item.value" :label="item.label" :value="item.v...
vue el-table selection @select 多选 同时选中条件相同的行
最新发布
qq_22828225的博客
06-06 1521
selectRow。
el-select下拉框样式结合el-table(伪)结合下拉选择
weixin_46211267的博客
01-15 4530
示例 使用 # ------------------------使用--------------------------------------- <drop-down-selector v-model="value" :options="{placeholder:'单位名称',disabled: false,multiple: true,selection:true,key:'id',label: 'name',clearable: true,collapseTags: 5}" :request-
Element-UI之el-table嵌套select选择器
m0_57071129的博客
05-24 6323
Element-UI之el-table嵌套select选择器 代码实现 html <el-table :data="tableData" border style="width: 100%" > <el-table-column prop="ftkmName" label="分摊科目名称" header-align="center"> </el-table-column>
element-ui中table组件的表格嵌套Select，table中使用select
Codernmx
01-21 7718
为了实现功能，我想在表格的每一行的对应列都添加一个下拉框Select,如图，但是使用官方文档的时候，会出现v-model不起作用，或者说是循环渲染之后，在一个地方选择，会所有绑定的地方都变成一样，是因为此时所有的下拉框的v-model绑定的都是同一个value 先看错误的代码： <el-table-column label="类型"> <el-select v-model="value" placeholder="请选
el-table组件select项选中数据回显
流云浮沙
01-15 2332
el-table组件select项 选中数据回显
Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案
weixin_45084986的博客
04-04 4503
本文主要记录多选操作 Element-ui官网参考 一、像下面这样直接使用，页面选择下拉列表数据，页面时不会更新的 <!-- 表格区开始 --> <el-table size="mini" :data="tableData" style="width: 98%"> <el-table-column label="select" width="100"> <!-- <template slot-scope="scope"> -->
vue.js使用心得——el-select，el-table数据处理，css样式穿透以及增删改查
热门推荐
梅斯温杜的学徒
09-02 7万+
    这个假期接触了网页前端的又一个利器，vue.js,它的主要特点在于对数据的双向绑定。想想之前用最原始的js的时候，我们更改页面上的数据，经常会用到InnerHTML，getElementById的代码，它实际上是在对DOM元素进行添加或修改，包括jQuery,也是通过查找页面源代码中的DOM标签，达到了动态效果的实现，当我们确定要对页面上某一元素进行修改的时候，会用id或name 进行元素...
封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目
金乌的博客
05-18 6928
表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value（code）值。二、el-option-node.vue。三、utils index.js。Step2： 创建两个文件。一、Select.vue。
el-select下拉框多选处理选中数据
chenThreeMetals的博客
06-24 2234
el-select下拉框设置多选属性：multiple <el-col :span="8"> <el-form-item label="保管员" label-width="120px"> <el-select v-model="form.custodianList" :disabled="isDetail" :placeholder="isDetail ? '' : '请选择保管员'" st.
el-table+el-tree+el-select动态选择对应值
袁的博客
10-18 4153
综合使用el-table+el-select+el-tree来实现element中el-table表格嵌套el-select，动态选择对应值
切换el-table中的el-select 点击添加将该行新增到新的表格中
不积跬步何以至千里
03-24 772
对象是引用类型 传递的是引用地址 所以你两个数组引用的是同一个对象 只要其中一个数组改变 就会导致对象改变 进而另一个引用的数组也会改 解决办法如上。：这里会遇到一个问题 就是切换左侧下拉框的值 添加到右侧数组里的值也会更新。1、切换下拉框 展开折叠框并显示二维码等相关信息。将当前行内容添加到右边下载区。2、下拉框有值时 点击操作列。3、点击下载区操作列。
vue项目中使用elemetui的el-select组件数据绑定的问题
露露
07-31 1945
<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> ...
el-select与tabs结合使用
m0_65915285的博客
02-15 260
el-select与tabs结合使用
antd table组件单元格嵌入select选择器
savivy的博客
02-15 3054
antd table组件单元格嵌入select选择器 dom <a-table :columns='columns' :dataSource='columnsList' rowKey="key" :pagination="false" :row-selection="selection" > <template slot="select" slot-scope="text"> <div
vue+ElementUI el-select实现下拉选择表格组件（2023-09-04 TSelectTable组件实现虚拟滚动，解决不分页数据量大渲染DOM过多而卡顿问题）
wocwin的博客
06-16 8923
TSelectTable组件实现虚拟滚动，解决不分页数据量大渲染DOM过多而卡顿问题TSelectTable组件新增搜索过滤功能、新增翻页选中功能；TSelectTable组件新增单选/多选默认值回显；TSelectTable组件新增单选---新增上、下、回车键盘事件；2023-06-28 TSelectTable组件新增查询条件组件；2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效
el-table的表单项中使用el-select组件，获取select选择的值
qq_52845451的博客
09-27 2299
el-table的表单项中使用el-select组件，获取select选择的值
el-table嵌套el-select
12-13
在el-table中嵌套el-select可以通过使用作用域插槽来实现。具体步骤如下： 1.在el-table中定义一个列，使用作用域插槽来渲染el-select组件。 2.在作用域插槽中，使用row作为参数来获取当前行的数据。 3.将el-select的v-model绑定到当前行的数据中的一个属性上，这样就可以在选中选项时更新数据。 4.使用:options属性来绑定选项列表，这个列表可以是一个数组，也可以是一个远程数据源。 下面是一个示例代码： ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="城市"> <template slot-scope="scope"> <el-select v-model="scope.row.city" placeholder="请选择"> <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option> </el-select> </template> </el-table-column> </el-table> ``` 在这个示例中，tableData是一个数组，每个元素都包含name、age和city三个属性。cities是一个选项列表，它是一个数组，每个元素都包含value和label两个属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值