elementui中表格点击某一行的图标,所有图标都会更改状态

141 阅读1分钟

解决办法: 将要拿来判断的字段shoucangActive放到scope.row中

<template>
    <el-table :data="tableData" style="width: 100%" @row-dblclick="rowDbClick" v-loading="loading">
          <el-table-column prop="name" label="项目名称">
          </el-table-column>
          <el-table-column prop="identifier" label="标识">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间">
            <template slot-scope="scope">
              <span style="display: inline-block;width: 30%;">{{ scope.row.updateTime }}</span>
              <!--重点-->
              <span>
                <i v-if="scope.row.shoucangActive" class="iconfont icon-shoucangxiao c-margin-left15 cursor-pointer"
                  @click="proshouCang(scope.$index, scope.row)"></i>
                  
                <i v-else class="iconfont icon-shoucang c-margin-left15 cursor-pointer"
                  @click="proshouCang(scope.$index, scope.row)"></i>
              </span>
            </template>
          </el-table-column>
     </el-table>
</template>

<script>
    data(){
        tableData: []
    },
    mounted(){
        this.tableData = res.data.map(item => {//给表格每一行都添加一个shoucangActive字段
            if (!item['shoucangActive']) {
              item['shoucangActive'] = false
            }
            return item;
        })
    },
    methods:{
        proshouCang(index,row){
            row.shoucangActive = !row.shoucangActive;
        }
    }
</script>