antd vue table中使用select时候修改第一条，更新后原位置值变成了刚才选中的值

最新推荐文章于 2024-07-25 17:23:54 发布
最新推荐文章于 2024-07-25 17:23:54 发布
阅读量719 收藏
点赞数
分类专栏： antd vue+vue3 文章标签： vue.js 前端 antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbchenxy/article/details/121146810
版权

antd vue table 中使用了customRender,修改第一个值为3之后，更新也页面，这条数据去了最后一条，但是轮播图2的排序值也变成了3，我查了一下数据确实是2，到底是什么原因导致了轮播图2的排序值变成了3而不是2呢，vue不是已经解决了这个问题么，为什么还是导致了这个情况的出现？

在这里插入图片描述
答案：这里边vue根据key值对比数据是否变化更新试图，当你的select没有key的时候，他使用的是这个数据的key值，当你修改之后，他对比发现key值并没有发生变化，所以他不会去更新试图，知道了问题出现的位置，解决就很简单了，给select加一个唯一的key值

lbchenxy
关注
专栏目录
iview select 上一次记录/缓存
嫣子的博客
12-17 653
iview select下拉总是有记录上一次的勾选… 给需要去除的select里面取一个calss名字然后进行修改，避免影响其他页面的下拉框。 class=“pipe-select-cate” <i-select v-model="form.categoryId" class="pipe-select-cate" :disabled="!canSave" @on-change="handleCateChange"> <Opti
Antd使用Table组件可编辑行功能 + 扩展编辑行组件Select的全选功能
qq_35533595的博客
11-24 3029
在使用Antd的UI组件库的Table组件时碰到的部分问题。以及业务需求处理在编辑过程中的Select组件扩充全选的功能。仅做记录。 实现编辑组件的主要代码 interface EditableCellProps extends React.HTMLAttributes<HTMLElement> { editing: boolean; dataIndex: string; title: any; inputType: 'select' | 'text'; record:
ant-vue Table组件selectedRows翻页后不保留上一页已选
周18的碎碎念
06-22 2287
思路：把当前页的selectedRowKeys存下来，其他页的selectedRowKeys拼接一下，然后去重并删除已取消项 代码我就不贴的很好了，因为每个人需求不一样： 我这里是用的数据的goodsID作为唯一标示进行操作的 onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows
vue el-table selection @select 多选 同时选中条件相同的行，不同表格选中
最新发布
qq_22828225的博客
07-25 373
vue el-table selection @select 多选 同时选中条件相同的行，不同表格选中
el-select使用bug:tabs切换时，el-select的选项值跟着变化时，选择不了数据
m0_65915285的博客
11-07 757
使用el-select的bug解决
vue elementUI select设置初始值
活宝小娜的博客
11-02 6279
vue elementUI select设置初始值
antd select 选择器设置默认值问题--强制刷新
热门推荐
倚树探星的博客
06-15 1万+
1、需求场景 需要给弹框里面的 select选择器、DatePicker选择器、RadioGroup设置默认值，默认值根据后台返回数据设置 很明显，该场景是在动态改变数据时设置默认选中的数据（而非在初始化的时候设置默认选中的数据） 默认值是根据 state 中的数据渲染的，不能使用 defaultValue 设置（因为其在生命周期中只执行一次，不参与后续的状态变量同步），需要使用 value 来设置 defaultValue：指定默认选中的条目 value：指定当前选中的条目 2、问题描述 通过 val
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
12-13
最近做的一个项目是基于 vue + AntDesign 的。由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下： 在线演示地址>>   首先新建一个Table组件的实例： <a> { return ...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
antd table排序 vue_Vue-Antd Table组件封装
weixin_39672160的博客
12-19 976
import T from 'ant-design-vue/es/table/Table'import get from 'lodash.get'export default {data () {return {needTotalList: [],selectedRows: [],selectedRowKeys: [],localLoading: false,localDataSource: []...
ant design vue 中select 的自定义下拉框内容属性dropdownRender的使用（一）
m0_59697051的博客
12-06 7822
ant design vue 下拉表格记录(一)
根据select选中的值来做的切换
Jxchen
08-25 5658
根据选择下拉菜单的中的值来切换显示内容 HTML： 选择内容1 选择内容2 选择内容3 选择内容4 要显示的内容1 要显示的内容2 要显示的内容3 要显示的内容4 JS： (function($)
antd table组件单元格嵌入select选择器
savivy的博客
02-15 3165
antd table组件单元格嵌入select选择器 dom <a-table :columns='columns' :dataSource='columnsList' rowKey="key" :pagination="false" :row-selection="selection" > <template slot="select" slot-scope="text"> <div
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
weixin_44912745的博客
08-26 2342
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
Vue学习-编辑table表格行数据，行数据消失
Java_Scholar0的博客
11-18 1380
问题描述： 如下两张图所示，选中table表格中的某一行数据进行编辑，form表单中出现table行回显数据，点击取消。再次选中同一行数据进行编辑，发现form表单回显数据以及选中的table行数据也消失。 this.mtitle = "修改科目"; this.modalType = 1; this.$refs.form.resetFields(); let v = params.row; for (let attr in v) { if (v[attr] == null) { v[attr
antdesign a-table customRender返回一个自定义内容，比如：a-select
theVirtual的博客
01-11 1273
【代码】antdesign a-table customRender返回一个自定义内容，比如：a-select。
Vue for循环遍历多个select下拉框，解决选择某个el-option下拉框的内容，所有的el-select值全部都跟着改变
li_zongfei的博客
01-13 8124
for循环遍历select下拉框，v-model绑定选中的el-select内容
vue 解决el-table 表体数据发生变化时，未重新渲染问题｜页面不更新问题
Here_C的博客
01-31 4157
在使用el-table组件时，数据已经发生了变化，但是页面显示的数据却没变化;在数据更新的地方后面加上如下。
react antd select下拉框选中一个值后变为输入框
03-30
在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 以下是一个示例代码： ``` import React, { useState } from "react"; import { Select } from "antd"; const { Option } = Select; const options = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "orange", label: "Orange" }, ]; function Demo() { const [value, setValue] = useState([]); function handleChange(value) { setValue(value); } return ( <Select mode="tags" style={{ width: "100%" }} placeholder="Please select" value={value} onChange={handleChange} > {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> ); } export default Demo; ``` 在上面的代码中，我们将Select的mode属性设置为 "tags"，并且在handleChange函数中更新了组件的值。当用户选择一个预设的选项时，组件的值会变为该选项的值。当用户输入一个自定义的选项时，组件的值会变为输入框中的文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lbchenxy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值