element组件，table组件里面嵌套popover组件，点击出现三个popover组件

Question

<el-table
        :data="tableData"
        border
        style="width: 100%">
      <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="操作">
        <template slot-scope="scope">
          {{scope.$index}}
          <el-popover
              placement="bottom"
              title="标题"
              width="200"
              v-model="tableData[scope.$index].isShow"
              trigger="click"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<!--            <el-button @click="cancel">取消</el-button>-->
            <el-button slot="reference" @click.stop="handleClick(scope.$index)">click 激活</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

<script type="text/ecmascript-6">
export default {
  name: "index",=
    data () {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          isShow: false
        }, {
          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
        }]
      }
    },
    methods: {
      cancel(scope) {
       this.tableData.forEach((item) => {
         item.isShow = false;
       })
      },
      handleClick(row) {
        console.log("handleClick");
        row.isShow = true;
      }
    }
};
</script>

点击click激活按钮，会出现三个popover

Answer 1

我感觉你的代码里面有几处问题。
（1）tableData中只有第一个有isShow，其他都没有这个参数。
（2）定义的方法与调用的函数有矛盾。

@click.stop="handleClick(scope.$index)"

handleClick(row) {
        console.log("handleClick");
        row.isShow = true;
      }

handleClick函数调用时的参数scope.$index只拿到了当前行的index。index没有isShow属性。
所以建议这些改成scope.row。
修改之后我感觉应该问题不大。