vue 一个数组对象，一个数组，数组对象中包含数组中的数据，给数组对象中增加属性

chensi_07

已于 2024-01-25 16:52:12 修改

阅读量736

点赞数 4

文章标签： vue.js javascript 前端

于 2024-01-25 16:47:55 首次发布

本文链接：https://blog.csdn.net/chensi_07/article/details/135848382

版权

本文描述了一个在项目开发中遇到的需求，如何根据后台返回的list数据和指定的id数组，通过编程实现对list中数据状态的动态管理，特别是当id匹配时增加状态功能。使用了Vue.js和ElementUI的VTable和el-table-column组件进行展示和操作。

摘要由CSDN通过智能技术生成

项目中遇到一个需求，后台返回一个list数据，然后给了一个id数组，如果id在list中能匹配上，给list中的id相等的数据增加状态。

实现代码如下：

<VTable
    :data="tableDataComp"
    :columnList="columnList"
    stripe
    class="function-list"
    @handleBtnClick="handleBtnClick"
>
    <el-table-column slot="slotCol" label="操作" width="150px">
        <template slot-scope="scope">
            <el-button
                type="text"
                v-if="scope.row.assigned"
                @click="addOrCancelAssigned(scope.row, 'dataCancel')"
            >取消分配</el-button>
            <el-button
                type="text"
                v-if="!scope.row.assigned"
                @click="addOrCancelAssigned(scope.row, 'dataAdd')"
            >分配</el-button>
        </template>
    </el-table-column>
</VTable>

data(){
    return{
        tableData: [], // 具体数据是从后台接口获取的
        roleData: [] // 具体数据是从后台接口获取的
    }
},
computed: {
    tableDataComp(){
      const roleDataObj = {}
      this.roleData.map(item=> {
        roleDataObj[item] = true
      })
      console.log(roleDataObj)
      this.tableData.forEach(i => {
        this.$set(i,'assigned',roleDataObj[i.dataId])
      })
      return this.tableData;
    }
}

tableData数据如下