iview可编辑 table 列数据 控制另一列数据

最新推荐文章于 2023-02-17 10:36:40 发布
最新推荐文章于 2023-02-17 10:36:40 发布
阅读量731 收藏
点赞数 1
分类专栏： iview table 组件 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ton555555/article/details/106025314
版权

在编辑一行数据的大前提下; 用一列数据 控制 另一列数据

首先: 设置 共享数据
data(){
	return{
		start_num: false,
	}
}
在上面render函数的基础上 控制 start_num的变化 (注意render函数中this指向)

在这里插入图片描述

然后 用 start_num 去控制 另一列(注意render函数中this指向)

在这里插入图片描述

效果如下:
为手动方式 时 不可编辑:

在这里插入图片描述

为自动方式时 可编辑

在这里插入图片描述

龙拳蜗牛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview,利用modal组件修改table中的某条数据时,表格中的数据会跟随变化
juvialoxer的博客
12-29 581
get factory_item() { let obj = {} // 利用深拷贝 obj = JSON.parse(JSON.stringify(this.factory_datas)); return obj; }
iview table换行_iview 表格可编辑
weixin_39965075的博客
12-23 1038
var app = newVue({el:'#app',data () {return{columns2: [{width:60,align:'center',render: (h,params) =>{return h('Checkbox', {props: {value:params.row.$isEdit,},on: {'on-change': function (state) {co...
iview 动态删除table的某一列
lchmyhua88的博客
11-08 898
有时候我们需要让Table组件不显示某行，如何实现？（基于iview），我们可以在初始化的时候把列全部取出来，在具体使用的时候在根据逻辑来处理，直接上代码： <template> <div style="width:600px;margin:0 auto"> <Tabs value="normal" @on-click="changeTab"> <TabPane label="查询" name="normal"> &
iveiw Table 组件在数据变更后，视图不改变
风一样的少年
04-07 721
问题描述 如上图，我想通过操作右边的按钮来操作表格里的数据（上移，下移，删除）。上移和下移的代码如下： moveUp (index) { console.log(index) if (index === 0) { return true } const temObj = this.data1 const tem = ...
iview的可编辑table表格数据不输入给默认值
qq_43469899的博客
12-13 1158
这几天博主遇到个需求需要给iview的table做成可编辑的,这个博主在上篇博客已经实现了,想了解的可以去看看上篇博客,我这篇博客主要是来给大家分享一下怎么在用户粗心不输入的时候你给他一个默认值! 我这边先展示一下我的相关对象数据信息 这是普通的data数据的数组和行的数据数组 这个对象是用来定位行和列数据的 我展示一下这个对象的数据,便于大家理解: /** * 编辑单元...
Iview 表格编辑
10-31
例如，我们可以这样配置一个可编辑的列： ```javascript { title: '姓名', key: 'name', editable: true // 或者 editable: (row, index) => { return true; } } ``` 接下来，我们关注动态编辑的核心部分。在...
iview table 自定义列_Vue -- iview 可编辑表格案例
weixin_31302227的博客
12-29 1360
>[success] # iview 可编辑表格案例~~~1.这个案例需要自行安装iview Ui 组件库2.iview的table 和 ele的table 略有区别，iview的table 组件需要使用render函数去渲染~~~>[info] ## 对iview--table 二次封装的案例* 实现效果 可以直接改变某列的数据![](https://box.kancloud.cn...
iview table 自定义列_iview自定义列模板-手动实现可编辑表格
weixin_42469000的博客
01-12 1011
slot-scope从 3.2.0 版本开始支持 slot-scope 写法。在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。示例可编辑表格{{ row.name }}{{ row.age }}{{ getBirthday(r...
vue+iview 实现可编辑表格的示例代码
10-17
7. **可编辑性**：实现可编辑表格的关键是设置列的`editable`属性为`true`，并将`data`属性绑定到Vue实例的相应数据上。对于不同的数据类型，可以使用`date`属性来配置不同的时间格式。 8. **构建工具**：示例代码...
解决View UI (iview)中Table组件data改变但页面不刷新的问题（vue）
Watanaki的博客
12-22 2629
解决View UI (iview)中Table组件data改变但页面不刷新的问题 原文链接：https://segmentfault.com/a/1190000022772025 问题： 在mouted中从接口获取了数据userLIst，并赋值给Table组件的data，但是页面没有显示数据。 解决： 分析：在控制台可以打印出userLIst，说明数据确实是有的，但是页面不刷新 原因：Vue.js不能检测到对象属性的添加或删除，因为vue.js在初始化实例时将属性转为getter/setter，
解决iview UI的Table组件数据刷新但是页面不刷新的问题
我的米饭
12-14 3630
在改变了 Table 绑定的 data 变量的数值后，表格的数据刷新了，但是页面不刷新，之前滚动到的位置仍然在那里，而且如果左右两侧有固定列的时候，会错位，解决方法是给 Table 组件绑定一个 Key 属性： <Table :columns="columns1" :data="data1" :key="Math.random()"></Table> ...
iview根据接口动态设置table列的显示隐藏
weixin_51565477的博客
01-17 1227
mouted this.setHandleColumns() methods setHandleColumns() { // 调用判断接口 this.XXX可以获取到后台返回的数据，根据后台返回数据实现是否显示 this.XXX().then(res => { this.handleColumns() }) }, //过滤表头 handleColumns(){ if(判断数据){ this.tableColumns = this.tab..
table标签、表格的跨行跨列、ifarme标签
weixin_46065214的博客
08-15 787
table标签、表格的跨行跨列、ifarme标签
vue动态控制table表格列数
蓝_蓝的博客
08-25 1606
vue动态控制table表格列数
VUE实现element的form表单中字段联动必填校验（根据一个字段内容决定另一个字段是否为必填项）
gyzzdjy的博客
02-17 5096
VUE实现element的form表单中字段联动必填校验（根据一个字段内容决定另一个字段是否为必填项）
iview render 子组件 给父组件传值
XiaoYi0215的博客
08-31 3111
我这里是一个点击事件调用了this.$Modal.confirm,想要自定义模态框中的内容，自定义内容又有tab切换，调用接口，点击事件等复杂操作，所以干脆将该自定义的部分写成了一个组件进行调用。 要实现的功能如下图所示： 点击某个btn按钮，弹出此框。 /** * 1. 父组件 */ import theModal from '..'; btnClick () { // 点击事件 ...
iview 通过多选框动态控制＜Table＞列数
zhongqing1995的博客
09-17 1504
首先说需求 1.通过多选框是否选中来控制表格对应的列是否显示, 默认选中全部显示,未选中隐藏,如下图 上代码 <template> <div class="function_list"> <Button icon="md-search"></Button> <Button icon="md-sync"></Button> <Button icon="ios-
vue中控制element表格列的显示与隐藏
weixin_62328829的博客
10-13 6817
思路就是：我们通过vue的监听功能来监听复选框的变化，当复选框发生了变化的时候，我们看对应复选框的选中和未选中的值。选中的为true让对应的列显示、隐藏的为false让对应的列隐藏。当然因为vue是数据的双向绑定的，所以我们就让对应的列的隐藏和表格的隐藏一一对应即可。根据项目需要，需要可以动态控制表格列的显示与隐藏，如下图，复选框选中状态下为显示，为选中状态下为隐藏。
iview table（多表头）导出以及原生table的js导出（跨行跨列）
xavier
06-25 3131
最近做的比较多的iview table的多表单渲染【后台返回动态多表头的culomns数据】， 1.采用jquery的table2excel.js 缺点：导出的文件会有提示问题 tableExport(tableId, name, ‘xlsx’) 2.iview table导出 先处理多表头的columns exportColumn = this.handleMultiTableHeader...
iview 动态table 列宽度
最新发布
08-09
iview是一款基于Vue.js的UI组件库，其中包含了丰富的组件，其中包括动态table组件。对于iview的动态table组件来说，设置列宽度有两种方式。 第一种方式是通过在columns字段中设置width属性来设置列宽度。例如： ``` columns: [ { title: '姓名', key: 'name', width: 100 // 设置姓名列的宽度为100px }, { title: '年龄', key: 'age', width: 80 // 设置年龄列的宽度为80px }, // 其他列... ] ``` 第二种方式是通过自定义列的slot插槽来设置列宽度。通过这种方式，可以灵活地自定义列的内容和样式。例如： ``` <template> <Table :columns="columns"> <template slot-scope="{ row }" slot="name"> <div style="width: 100px;">{{ row.name }}</div> </template> <template slot-scope="{ row }" slot="age"> <div style="width: 80px;">{{ row.age }}</div> </template> </Table> </template> <script> export default { data() { return { columns: [ { title: '姓名', key: 'name', }, { title: '年龄', key: 'age', }, // 其他列... ] } } } </script> ``` 通过以上两种方式，可以灵活地设置iview动态table组件中的列宽度。根据需求选择适合的方式来设置表格列的宽度，以便展示合适的数据内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值