iview-table组件嵌套input select数据无法双向绑定解决

 更新时间:2022年09月13日 09:50:33   作者:做什么梦呢  
这篇文章主要为大家介绍了iview-table组件嵌套input select数据无法双向绑定解决示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、前言

本篇主要介绍关于iview-ui组件库中的table表格组件嵌套input组件,数据无法及时更新问题的解决办法。

二、问题描述

在我们开发的过程中,经常会遇到需要在表格内操作数据的情况,但是在vue2中,双向绑定的值必须是在data中声明的变量,然而我们在table中展示的每一行数据,通常都是使用的scope中的row去获取的当前行数据,但是row却并没有在data中声明,这样就出现了,无法实现数据的双向绑定。

三、解决办法

因为在使用场景中,有时候我们用的一维的表格,还有一种就是树状结构的表格,所以这里我们分两种情况说。

1.基础数据表格

第一种就是一维数组的基础型数据的table展示。如下图

这种情况,为了实现数据的双向绑定,我们可以这么做,代码如下

<template>
    <Table :columns="columns" :data="tableData">
        <template #name="{ row, index }">
          <Input v-model="tableData[index].name" />
        </template>
        <template #desc="{ row, index }">
          <Input v-model="tableData[index].desc" />
        </template>
        <template #action="{ row, index }">
          <Button type="text">删除</Button>
        </template>
    </Table>
</template>
export default {
    data () {
        return {
            tableData: []
            columns: [
                {
                  type: 'index',
                  title: '序号',
                  width: 80,
                  align: 'center'
                },
                {
                  title: '参数名称',
                  slot: 'name'
                },
                {
                  title: '参数描述',
                  slot: 'desc'
                },
                {
                  title: '操作',
                  slot: 'action',
                  width: 120
                }
            ]
        }
    }
}

这种基础型数据结构的表格,我们就可以直接利用tableData[index]来替代row,因为tableData在data中声明了,所以这时候,input上绑定的数据,是可以实现双向绑定的。

2.树形数据表格

第二种树形结构的数据表格,展示情况如下图所示

这种情况,我们就不能用上面的方法了,因为我们不能通过index去获取更多维深度的数据了,因此这里我们可以通过事件监听的方式,去查询当前改变数据是哪个,利用树型数据的唯一_key值,去这个绑定数组tabelData中修改对应的值,代码如下

<template>
    <Table row-key="_key" :columns="columns" :data="tableData">
      <template #label="{ row }">
        <Input v-model="row.label" @on-change="updateTableData(row, 'label')" />
      </template>
      <template #componentName="{ row }">
        <Select v-model="row.componentName" transfer @on-change="updateTableData(row, 'componentName')">
          <Option v-for="item in componentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </template>
      <template #required="{ row }">
        <Checkbox v-model="row.required" @on-change="updateTableData(row, 'required')" />
      </template>
      <template #hidden="{ row }">
        <Checkbox v-model="row.hidden" @on-change="updateTableData(row, 'hidden')" />
      </template>
      <template #defaultValue="{ row }">
        <Input v-model="row.defaultValue" @on-change="updateTableData(row, 'defaultValue')" />
      </template>
    </Table>
</template>
export default {
    data () {
        return {
            tableData: [],
            componentList: [
                {
                  value: 'TextField',
                  label: '文本组件'
                }
            ],
            columns: [
                {
                  title: '字段名称',
                  key: 'name',
                  tree: true
                },
                {
                  title: '显示名称',
                  slot: 'label',
                },
                {
                  title: '字段类型',
                  slot: 'componentName'
                },
                {
                  title: '必填',
                  slot: 'required',
                  width: 60
                },
                {
                  title: '隐藏',
                  slot: 'hidden',
                  width: 60
                },
                {
                  title: '默认值 ',
                  slot: 'defaultValue'
                }
            ]
        }
    },
    methods: {
        // 找到对应值递归---手动更新
        repeatDoit (list, row , key) {
          list.forEach(item => {
              if (item._key === row._key) {
                item[key] = row[key]
              } else {
                if (item.children && item.children.length) {
                  this.repeatDoit(item.children, row , key)
                }
              }
          })
        },
        // 手动更新表格中的数据==body
        updateTableData (row, key) {
          this.repeatDoit(this.tableData, row, key)
          console.log('this.tableData ====', this.tableData)
        }
    }
}

这里我们通过监听表单组件的事件,然后通过树形结构的唯一_key值,去修改data中声明tableData数组变量,从而实现数据的更新。

四、后记

以上我们就实现了解决iview-table组件嵌套input、select数据无法双向绑定问题。另外还有一种解决方法,是使用render去构造表格,我不太喜欢那种写法,所以这里就不说了,更多关于iview table数据双向绑定的资料请关注脚本之家其它相关文章!

相关文章

  • daisyUI解决TailwindCSS堆砌class问题详解

    daisyUI解决TailwindCSS堆砌class问题详解

    这篇文章主要为大家介绍了daisyUI解决TailwindCSS堆砌class问题详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么?通过一个对象代理,对另一个对象中属性的操作,简单就是说:可以通过 对象b 对 对象a 中的属性进行操作,这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11
  • Vue2.0 组件传值通讯的示例代码

    Vue2.0 组件传值通讯的示例代码

    本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue3 中使用vue img cutter 图片裁剪插件的方法

    vue3 中使用vue img cutter 图片裁剪插件的方法

    这篇文章主要介绍了vue3 中使用vue img cutter 图片裁剪插件的方法,首先安装依赖,构建 components/ImgCutter.vue 组件,需要的朋友可以参考下
    2024-05-05
  • vue-element-admin开发教程(v4.0.0之后)

    vue-element-admin开发教程(v4.0.0之后)

    由于vue-element-admin的架构再4.0.0版本后做了重构,整体结构上和之前的还是很相似的,但是也有些变化,本文就介绍vue-element-admin开发教程(v4.0.0之后),感兴趣的可以了解一下
    2022-04-04
  • vue实现选项卡案例

    vue实现选项卡案例

    这篇文章主要为大家详细介绍了vue实现选项卡案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue项目遇见事件冒泡该如何处理详解

    vue项目遇见事件冒泡该如何处理详解

    冒泡事件处理是由内而外发生的,例如有两个父子div,给他们分别写上点击事件,点击子div先响应的是子div,再是父div,下面这篇文章主要给大家介绍了关于vue项目遇见事件冒泡该如何处理的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue中对接Graphql接口的实现示例

    vue中对接Graphql接口的实现示例

    本文主要介绍了vue中对接Graphql接口的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue接口请求加密实例

    vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论