解决el-table某列数据无法修改内容问题

最新推荐文章于 2024-05-09 12:26:53 发布
最新推荐文章于 2024-05-09 12:26:53 发布
阅读量1.7k 收藏
点赞数
分类专栏： Vue面试题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a576837179/article/details/111602300
版权

因后台返回值不符合要求，列数据时间值的末尾都带有.0，要求去掉。现按以下即可解决。
解决前：
在这里插入图片描述
一开始是想用过滤方法scope.row.newCommitTime | filters解决，但没法改变内容所以行不通。

<el-table-column prop="newCommitTime" label="最新时间" sortable width="144px" align="center"
最低0.47元/天 解锁文章
a576837179
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
el-form 中添加el-table ，el-table中的input赋值后不能编辑
addUpGirl的博客
08-29 755
el-table中的el-input初始赋值后不能修改和编辑
element ui组件赋值后部分组件修改数值无效情况解决
weixin_42192467的博客
06-28 2502
在使用过程中发现el-input-number无法输入，在网上搜资料，最终找到解决办法是在el-input-number上绑定@change=”changeVal($event)”
基于el-table实现行内增删改功能
最新发布
菜鸟教程
05-09 484
到此这篇关于基于el-table实现行内增删改的文章就介绍到这了,更多相关el-table行内增删改内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/茂名一技http://www.enechn.com/message: '已恢复原值',
Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改
七月❤的博客
06-07 2435
【代码】Vue element-ui如何给table表格的一行设置为不可勾选，input不可修改。
解决 elementUI 的 table 表格改变数据不更新问题 解决 vue数据不更新问题 element-ui 表格数据不更新
半只
03-21 7425
stylewidth100%
vue+elementUI表格某一行修改局部刷新实现
Mark的博客
05-29 5495
使用elementUI表格，想修改某一行数据然后不想全量刷新，只想刷新当前修改的行内容。1.主要是获取下标和行内容：scope.$index,scope.row。
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
bigbomb369的博客
07-05 3645
其实此处打的问题是内容已经被修改了，但是table表格因为没有更新数据，所以看起来像是没有修改成功 此处可以添加给对应的input标签添加@input=“onExchange（scope.$index）” <template slot-scope="scope> <el-input v-model="scope.row[item.prop]" @input="onExchange(scope.$index)" type="tex
elementUi 表格双击编辑 输入框赋值后不可编辑的坑
qq_43593142的博客
06-10 2693
##表格双击编辑 ###代码 ####html <el-table id="table_1" :row-class-name="tableRowClassName_1" :data="tableData_1" :summary-method="getSummaries" show-summary highlight-current-row @cell-click="cellClick" style="width: 100%;"> <!--
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
12-04
修改列标题样式 1.在列标题后面加一个图标。 以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下： <el-table :data="tableData2" style="width: 100%" :row-class-
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
element+vue之table内插入input，input默认赋值后不能编辑
Jasmin博客
01-13 1270
table内插入input，input默认赋值后不能编辑 <el-table-column prop="warningNum" label="预警数量" align="center" > <template slot-scope="scope"> <el-inpu
element ui table编辑回显数据无法再在修改，input失效
m0_59547707的博客
04-10 711
table编辑回显数据无法再在修改
vue el-table设置符合条件的某些行不能选择
farmss的博客
09-27 3556
vue el-table设置符合条件的某些行不能选择，根据需求，第二次补充添加的时候，已经添加的项目需要置灰，不能再进行操作，未选择的可以继续添加。 根据一位前辈的经验（非常感谢），进行操作，终于成功了，特来记录一下，方便学习，下面是主要代码。 <el-table-column type="selection" :selectable="checkSelectable" width="60"> </el-table-
前端表格部分可编辑，部分不可以编辑
qq_54524289的博客
04-22 225
非常重要的是实现不可以编辑效果，这代码很重要。
el-table设置部分多选框禁选
lidianbai的博客
05-28 1633
el-table设置部分禁选
element_Ui table 设置部分禁用
Lei_Xue的博客
08-16 1109
效果图 不废话上代码 <el-table :data="tableData" header-align="center" @selection-change="handletable"> <el-table-column type="selection" width="55"align="center":selectable="selectable"> </el-table-column> <el-tab.
el-table中某一列批量修改
12-05
根据提供的引用内容，可以通过私有化掉el-table组件，然后在组件内部进行调整，最后在项目中覆盖掉element的el-table组件来实现el-table中某一列批量修改。具体步骤如下： 1. 私有化el-table组件，即将el-table组件复制一份到自己的项目中，并重命名为MyTable。 2. 在MyTable组件中，找到需要批量修改的列，例如第二列，将其改为可编辑状态，即添加edit-render属性，并指定渲染函数。 3. 在MyTable组件中，添加一个全选框，用于选择需要批量修改的行。 4. 在MyTable组件中，添加一个批量修改按钮，用于触发批量修改操作。 5. 在MyTable组件中，添加一个data属性，用于存储表格数据。 6. 在MyTable组件中，添加一个方法，用于处理批量修改操作。该方法会遍历所有选中的行，并将第二列的值修改为指定的值。 7. 在MyTable组件中，添加一个watcher，用于监听表格数据的变化。当表格数据发生变化时，重新生成一个随机数，并将其赋值给tableKey属性。这样可以达到动态更新效果。 8. 在项目中使用MyTable组件，覆盖掉element的el-table组件。 代码示例： ```html <template> <div> <el-table :data="tableData" :key="tableKey" ref="table"> <el-table-column type="selection"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age" :edit-render="editRender"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> <el-button @click="batchEdit">批量修改</el-button> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' }, ], tableKey: Math.random(), }; }, methods: { editRender(h, { row, column, $index }) { return h('el-input', { props: { value: row[column.property], }, on: { input: value => { row[column.property] = value; }, }, }); }, batchEdit() { const selection = this.$refs.table.selection; const newValue = 30; selection.forEach(item => { item.age = newValue; }); }, }, watch: { tableData() { this.tableKey = Math.random(); }, }, }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值