elementUI のテーブルコンポーネントは、データを動的に追加および削除する入力可能なテーブルを実装します。

elementUI のテーブルコンポーネントは、動的に追加および削除できる入力可能なテーブルを実装しており、テーブル内のデータをリンクする必要があります。

問題の説明

前回の記事では、テーブルに動的に追加および削除できる入力テーブルを実装する方法を解決しました。リンクは次のとおりです。 elementUI
のテーブルコンポーネントは、入力テーブルの動的追加と削除を実装します。
これで、ドロップダウンリストにデータが表示されますテーブル内の項目が一度に読み込まれるので問題ありませんが、
ドロップダウンボックス間のデータが関連しているという問題が発生します。例えば、「テスト会社001」として会社を選択した場合、サプライヤーのドロップダウンリストには、「テスト会社 001」に対応するサプライヤーデータが表示される必要があります。会社を「テスト会社 002」として選択すると、サプライヤーのドロップダウンリストには、「テスト会社 002」に対応するサプライヤーデータが表示されます。つまり、サプライヤーのドロップダウンデータも動的であり、企業の選択が変化しているため、この場合、以前の方法では効果を
達成するのに十分ではありません。
ここに画像の説明を挿入します

解決

解決策は、行が追加されるたびにテーブルのデータの行レベルのデータにフィールド (quanlifyCoopList) を手動で追加し、各行のデータ関連付けによって見つかったデータを保存することで、各行に個別のプルが存在するようにすることです。データ連携を行うたびに、
テンプレート部分に新たに追加したこのフィールドの値を変更するだけで済みます。

<el-form-item label="添加信息" prop="remark">
  <!-- 添加按钮 -->
  <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
  <el-table
    :data="dataList"
    size="mini"
  >
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="companyName" label="公司名称" :show-overflow-tooltip="true" min-width="150">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.companyName"
          clearable
          placeholder="请选择公司"
          @change="handleCompany(scope.$index, scope.row)"
          style="width: 100%"
        >
          <el-option
            v-for="item in companyList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="quanlifyCoop" label="供应商" :show-overflow-tooltip="true" min-width="150">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.quanlifyCoop"
          placeholder="请选择合同"
          style="width: 100%"
        >
          <el-option
            v-for="item in scope.row.quanlifyCoopList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="contractName" label="合同名称" :show-overflow-tooltip="true" min-width="150">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.contractName"
          placeholder="请选择合同"
          style="width: 100%"
        >
          <el-option
            v-for="item in contractList"
            :key="item.dicId"
            :label="item.dicItemName"
            :value="item.dicId"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="comment" label="备注" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <el-input v-model="scope.row.comment" clearable placeholder="请输入备注" />
      </template>
    </el-table-column>
    <el-table-column width="50" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

スクリプト部分

data() {
    
    
  return {
    
    
	dataList: [],
	// 公司列表测试数据subList为关联的供应商下拉数据
    companyList: [
      {
    
    
        dicId: '001',
        dicItemName: '测试公司001',
        subList: [
          {
    
    
            dicId: '001001',
            dicItemName: '1号供应商1公司',
          },
          {
    
    
            dicId: '001002',
            dicItemName: '1号供应商2公司',
          },
          {
    
    
            dicId: '001003',
            dicItemName: '1号供应商3公司',
          },
        ]
      },
      {
    
    
        dicId: '002',
        dicItemName: '测试公司002',
        subList: [
          {
    
    
            dicId: '002001',
            dicItemName: '2号供应商1公司',
          },
          {
    
    
            dicId: '002002',
            dicItemName: '2号供应商2公司',
          }
        ]
      },
      {
    
    
        dicId: '003',
        dicItemName: '测试公司003',
      },
    ],
    contractList: [],
  }
},
methods: {
    
    
  // 添加行
  handleAdd() {
    
    
    var _this = this

    let list = {
    
    
       companyName: '',
       quanlifyCoop: '',
       contractName: '',
       comment: '',
       quanlifyCoopList: []  // 每行添加一个存放供应商下拉数据的字段
     }

    _this.dataList.push(list)
  },
  // 删除行
  handleDelete(index, row) {
    
    
    var _this = this

    _this.dataList.splice(index, 1)
  },
  // 公司选中-改变供应商列表
  handleCompany(index, row) {
    
    
    var _this = this
    
    // 每次公司改变时将供应商的值置空
    row.quanlifyCoop = ''
    let list = []
    _this.companyList.forEach(line => {
    
    
      if (row.companyName == line.dicId) {
    
    
        list = line.subList
      }
    })
    // 公司改变的时候对应每行的供应商下拉数据也要跟着改变
    _this.dataList[index].quanlifyCoopList = list

    // *如果关联数据是接口获取，需要在数据赋值完成后重新刷新以下table的data值
    // *不然关联数据下拉列表由于vue框架数据驱动机制，只改变局部数据导致列表无法正常显示
    _this.dataList = [..._this.dataList]
  },
}

データエコー

上記のソリューションの追加および削除機能は完全に実装されていますが、新たな問題があります: 一般に、これはフォームに実装されており、フォームには編集が含まれます。編集中にエコーされるデータは、詳細インターフェイスを呼び出すことによって取得されます。そのため、ドロップダウンリストに関連付けられたデータは正しく表示されません
。

詳細データをエコーする際、関連データを保存するフィールド quanlifyCoopList を手動で追加する必要もあります。
次に、詳細データを調べて、企業の対応するサプライヤーリストデータを各 quanlifyCoopList フィールドに割り当てます。
最終的な詳細データをテーブルのデータに代入する

methods: {
    
    
  // 获取详情-数据回显
  getDetail(id) {
    
    
    var _this = this
	// 查详情接口
    getDetail(id).then(res => {
    
    
      res.data.companyList.length && 
      res.data.companyList.forEach(line => {
    
    
        _this.companyList.forEach(lineSub => {
    
    
          if (line.companyName == lineSub.dicId) {
    
    
            // 获取到回显列表后，给每个回显列表手动添加一个关联下拉列表值quanlifyCoopList
            line.quanlifyCoopList = lineSub.subList
          }
        })
      })
      // 最后把带有quanlifyCoopList的数据统一赋值给table的data
      _this.dataList = res.data.companyList
    })
  },
}

上記は個人的な経験に基づくものですので、皆様のお役に立てれば幸いです。