快捷導(dǎo)航

iview-table組件嵌套input?select數(shù)據(jù)無(wú)法雙向綁定解決

更新時(shí)間：2022年09月13日 09:50:33 作者：做什么夢(mèng)呢

這篇文章主要為大家介紹了iview-table組件嵌套input?select數(shù)據(jù)無(wú)法雙向綁定解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、前言

本篇主要介紹關(guān)于iview-ui組件庫(kù)中的table表格組件嵌套input組件，數(shù)據(jù)無(wú)法及時(shí)更新問題的解決辦法。

二、問題描述

在我們開發(fā)的過程中，經(jīng)常會(huì)遇到需要在表格內(nèi)操作數(shù)據(jù)的情況，但是在vue2中，雙向綁定的值必須是在data中聲明的變量，然而我們?cè)趖able中展示的每一行數(shù)據(jù)，通常都是使用的scope中的row去獲取的當(dāng)前行數(shù)據(jù)，但是row卻并沒有在data中聲明，這樣就出現(xiàn)了，無(wú)法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

三、解決辦法

因?yàn)樵谑褂脠?chǎng)景中，有時(shí)候我們用的一維的表格，還有一種就是樹狀結(jié)構(gòu)的表格，所以這里我們分兩種情況說(shuō)。

1.基礎(chǔ)數(shù)據(jù)表格

第一種就是一維數(shù)組的基礎(chǔ)型數(shù)據(jù)的table展示。如下圖

這種情況，為了實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，我們可以這么做，代碼如下

<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: '序號(hào)',
                  width: 80,
                  align: 'center'
                },
                {
                  title: '參數(shù)名稱',
                  slot: 'name'
                },
                {
                  title: '參數(shù)描述',
                  slot: 'desc'
                },
                {
                  title: '操作',
                  slot: 'action',
                  width: 120
                }
            ]
        }
    }
}

這種基礎(chǔ)型數(shù)據(jù)結(jié)構(gòu)的表格，我們就可以直接利用tableData[index]來(lái)替代row，因?yàn)?code>tableData在data中聲明了，所以這時(shí)候，input上綁定的數(shù)據(jù)，是可以實(shí)現(xiàn)雙向綁定的。

2.樹形數(shù)據(jù)表格

第二種樹形結(jié)構(gòu)的數(shù)據(jù)表格，展示情況如下圖所示

這種情況，我們就不能用上面的方法了，因?yàn)槲覀儾荒芡ㄟ^index去獲取更多維深度的數(shù)據(jù)了，因此這里我們可以通過事件監(jiān)聽的方式，去查詢當(dāng)前改變數(shù)據(jù)是哪個(gè)，利用樹型數(shù)據(jù)的唯一_key值，去這個(gè)綁定數(shù)組tabelData中修改對(duì)應(yīng)的值，代碼如下

<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: '默認(rèn)值 ',
                  slot: 'defaultValue'
                }
            ]
        }
    },
    methods: {
        // 找到對(duì)應(yīng)值遞歸---手動(dòng)更新
        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)
                }
              }
          })
        },
        // 手動(dòng)更新表格中的數(shù)據(jù)==body
        updateTableData (row, key) {
          this.repeatDoit(this.tableData, row, key)
          console.log('this.tableData ====', this.tableData)
        }
    }
}

這里我們通過監(jiān)聽表單組件的事件，然后通過樹形結(jié)構(gòu)的唯一_key值，去修改data中聲明tableData數(shù)組變量，從而實(shí)現(xiàn)數(shù)據(jù)的更新。

四、后記

以上我們就實(shí)現(xiàn)了解決iview-table組件嵌套input、select數(shù)據(jù)無(wú)法雙向綁定問題。另外還有一種解決方法，是使用render去構(gòu)造表格，我不太喜歡那種寫法，所以這里就不說(shuō)了，更多關(guān)于iview table數(shù)據(jù)雙向綁定的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: