Element: 在table的自定义列中使用click方式的Popover的BUG

[miaosun009]

ElementUI version

OS/Browers version

Vue version

Reproduction Link

<el-table v-loading.body="loading" :data="usersData" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="username" label="用户名" width="180"></el-table-column>
            <el-table-column prop="remark" label="描述"></el-table-column>
            <el-table-column prop="last_login_time" label="最后登录时间" width="200"></el-table-column>
            <el-table-column prop="last_login_ip" label="最后登录ip" width="200"></el-table-column>
            <el-table-column inline-template label="状态" width="120">
                <el-switch v-model="row.status" on-text="" off-text="" @change="switchChange(row)"></el-switch>
            </el-table-column>
            <el-table-column :context="$parent" inline-template label="操作" width="150">
                <template>
                    <el-popover ref="popover2" placement="bottom-end" :value="visible1" width="150" trigger="click">
                        <p>确定删除选中的数据吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
                        </div>
                    </el-popover>
                    <el-button icon="edit" size="mini" @click="edit(row)"></el-button>
                    <el-button icon="setting" size="mini" @click="group(row)"></el-button>
                    <el-button icon="delete" :plain="true"  type="danger" v-popover:popover2 size="mini" ></el-button>
                </template>
            </el-table-column>
        </el-table>

点击取消，visible1=false， 但是Popover不会隐藏

[furybean]

inline-template 这种玩法导致的，把 visible1 = false 改成一个方法应该可以解决这个问题。

[QingWei-Li]

Table 里用 Popover 推荐使用 reference slot 的方式

<el-popover
  placement="right"
  title="标题"
  width="200"
  trigger="focus"
  content="这是一段容,这是一段容,这是一段容,这是一段容。">
  <el-button slot="reference">focus 激活</el-button>
</el-popover>

[reverland]

<el-popover
  placement="right"
  title="标题"
  width="200"
  trigger="focus"
  content="这是一段容,这是一段容,这是一段容,这是一段容。">
  <el-button slot="reference">focus 激活</el-button>
</el-popover>

这样用，应该是会造成很多popover？

假如我想在popover中放置一个按钮来关闭弹窗，就无法绑定v-model到一个变量

[reverland]

@QingWei-Li ref的方式在表格中不能用么。。我这里试了下根本就出不来。。。

http://jsfiddle.net/8acj8jjb/2/

[QingWei-Li]

@reverland 那应该就不能用吧。。。

[reverland]

@QingWei-Li 不明白啊,没感觉表格内外有什么区别...似乎，都到$refs上给popper处理了...

[vanestone]

<el-table-column label="操作" :context="_self" inline-template>
    <div class="operation">
        <el-popover ref="popover" placement="top" v-model="popoverArray[$index].flag" trigger="click">
            <p>您确定取消订单 "{{row.id}}" 吗？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click.native.prevent="handleOperationButtonClick('cancel', row, $index)">取消</el-button>
                <el-button size="mini" type="primary" @click.native.prevent="handleOperationButtonClick('ok', row, $index)">确定</el-button>
            </div>
        </el-popover>
        <el-button type="text" size="small" v-popover:popover>取消</el-button>
    </div>
</el-table-column>

在数据绑定的时候, 赋默认值this.popoverArray.push({ flag: false }), 然后通过index来操作数组, 实现popover的隐藏

>v-model="popoverArray[$index].flag"

>data.map(v => { this.popoverArray.push({ flag: false }) })

handleOperationButtonClick(operate, row, index = 0) {
    switch (operate) {
        case 'cancel':
            this.popoverArray[index].flag = false
            break;
        case 'ok':
            this.popoverArray[index].flag = false
            console.log(`${row.id} --> 订单取消成功`);
            break;
    }
}