gpt4 book ai didi

el-table中加入el-select实现默认显示且可差异化每一行

转载 作者:知者 更新时间:2024-03-13 07:59:20 28 4
gpt4 key购买 nike

1.场景描述

项目中用到了element-ui的el-table组件,在表格中加入了下拉框,下拉框实现默认显示第一条数据。

2.出现的问题

v-model的值不知如何定义:服务器列表是个数组,每行的数据都不一样,如果绑定一个data中的一个变量,那么每一行绑定的值都是一样的,而且还不能默认显示第一值。

下面是错误示例:在data中定义一个变量serverId

<el-table ref="table":data="tableData" highlight current-row stripe style="width: 100%">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="name" label="项目名称" />
    <el-table-column prop="servers" label="服务器列表">
    	<template slot-scope="scope">
            <el-select v-model="serverId" placeholder="请选择">
                <el-option
                   v-for="item in scope.row.servers"
                   :key="item.serverId"
                   :label="item.name"
                   :value="item.serverId"
                   />
            </el-select>
    	</template>
	</el-table-column>
</el-table>

放在data()中的假数据:
tableData: [
        {
          name: "项目1",
          servers: [
            { serverId: 1, name: "服务器1" },
            { serverId: 2, name: "服务器2" },
            { serverId: 3, name: "服务器3" },
          ],
        },
        {
          name: "项目2",
          servers: [
            { serverId: 7, name: "服务器4" },
            { serverId: 8, name: "服务器5" },
            { serverId: 9, name: "服务器6" },
          ],
        },
        {
          name: "项目3",
          servers: [
            { serverId: 4, name: "服务器7" },
            { serverId: 5, name: "服务器8" },
            { serverId: 6, name: "服务器9" },
          ],
        },
      ],

但会导致莫名奇妙的问题,本来都是服务器的列表,如果在某一行选择一个服务器,其他行的值直接变成了数值!!!

3.解决问题

用element-ui的选择器要想默认显示第一个值,v-model的值要与el-option中的:value的值相同。

如何定义这个v-model的值呢,这个值和其他行的还不能一样,还要实现和服务器的第一条数据的value值相同。

经过我苦苦冥想,想到一个方法就是将服务器的一条数据的id遍历到每行的数据列表中。

mounted(){
    this.tableData.forEach(item=>{
      item.serverOne=item.servers[0].serverId;
    })
  },

将列表的v-model=scope.row.serverOne

<el-table-column prop="servers" label="服务器列表">
    	<template slot-scope="scope">
            <el-select v-model="scope.row.serverOne" placeholder="请选择">
                <el-option
                   v-for="item in scope.row.servers"
                   :key="item.serverId"
                   :label="item.name"
                   :value="item.serverId"
                   />
            </el-select>
    	</template>
	</el-table-column>

此时已经可以默认显示第一个值了

但是又出现一个问题,当我在某一行选择服务器的时候,不能选择(最后发现是不能实时更新列表的label值,只有当你用数据点其他行时,服务列表的值才能更新)

发现问题之后,开始找资料,最后知道改变数组可以触发视图更新的方法:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

这些方法的作用我就不一一列举了,我只用了两个:插入方法push()和删除末尾方法pop()

<el-table-column prop="servers" label="服务器列表">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.serverOne"
            placeholder="请选择"
            @change="updateTable()"
          >
            <el-option
              v-for="item in scope.row.servers"
              :key="item.serverId"
              :label="item.name"
              :value="item.serverId"
            />
          </el-select>
        </template>
      </el-table-column> 
方法:
updateTable() {
      this.tableData.push("");
      this.tableData.pop();
    },

到此实现下拉列表实现默认显示且可选择

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com