vue + elementTable 给table的每一行添加一个下拉菜单遇到的问题

Question

  <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <div class="selectBox" @click="handleClick(scope.row)">
              全部操作
              <i class="el-icon-caret-bottom"></i>
            </div>
            <ul class="options" v-show="showOptions">
              <li
                v-for="(data,key,index) in datas"
                @click="addClassFun(index)"
                v-bind:class="{bgColor:index==qwerqwre}"
                :key="index"
              >{{data.data}}</li>
            </ul>
          </template>
        </el-table-column>

 showOptions: false,
 datas: {
        dataAll: {
          data: "全部操作"
        },
        data1: {
          data: "查看",
          ifAdd: 0
        },
        data2: {
          data: "修改",
          ifAdd: 1
        },
        data3: {
          data: "删除",
          ifAdd: 2
        },
        data4: {
          data: "用户",
          ifAdd: 3
        },
        data5: {
          data: "授权",
          ifAdd: 4
        }
      },

 //点击操作
    handleClick(index) {
      console.log(index);
      this.showOptions = !this.showOptions;
    },

通过一个变量 控制 这块下来的显示
如果是多条数据的话，点击某一行的下拉菜单，所有的菜单都会下拉
想请教一下 用什么方法 能点击某一行 只有某一行的下拉菜单下拉呢

目前的样子

Answer 1

<!-- -->
<template>
<el-table :data="tableData" style="width: 100%" max-height="250">

<el-table-column fixed prop="date" label="日期" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编" width="120">
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
  <template slot-scope="scope">
    <div class="selectBox" @click="handleClick(scope.row,scope.$index)">
      全部操作
      <i class="el-icon-caret-bottom"></i>
    </div>
    <ul class="options" v-show="showOptions[scope.$index]">
      <li v-for="(data,key,index) in datas" @click="addClassFun(index)" v-bind:class="{bgColor:index==qwerqwre}" :key="index">{{data.data}}</li>
    </ul>
  </template>
</el-table-column>

</el-table>
</template>

<script>
export default {
data() {

return {
  showOptions: [false, false, false, false, false, false],
  tableData: [
    {
      date: '2016-05-03',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-08',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-06',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-07',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }
  ],
  datas: {
    dataAll: {
      data: '全部操作'
    },
    data1: {
      data: '查看',
      ifAdd: 0
    },
    data2: {
      data: '修改',
      ifAdd: 1
    },
    data3: {
      data: '删除',
      ifAdd: 2
    },
    data4: {
      data: '用户',
      ifAdd: 3
    },
    data5: {
      data: '授权',
      ifAdd: 4
    }
  }
}

},

methods: {

handleClick(row, index) {
  this.$set(this.showOptions, index, !this.showOptions[index])
}

}
}
</script>
<style lang='less' scoped>
</style>

Answer 2

那肯定不是只写一个showOptions来控制所有的 你需要把showOptions放到整个数组中 通过scope.row.showOptions来控制每一行的显隐