关于eltable中嵌套elselect问题

请问怎么实现编辑时显示elselect，编辑完毕隐藏elselect

这里用vif点击编辑时，马上可以获取焦点，但是选中elselect中的值不能显示，在vue开发者工具中也没有值，@change事件也获取不到value，

但是改成vshow，以上问题就不存在，但是当点击编辑该cell时，初始获取不到焦点，这样当用户点击该单元格，但是不选中任何东西，该select也不隐藏，需要用户点击获取焦点，在失去焦点才可以隐藏

            <el-table-column label="出货点" width="80" align="center" prop="deliverLocation">
                <template slot-scope="{row,column}">
                    <el-select v-model="row.deliverLocation" v-if="row[column.property + '_isEdit']" filterable
                         @blur="alterData($event,row, column)" @change="alterData($event,row, column)" size="mini" :ref="column.property">
                        <el-option v-for="item in deliverLocationList" :key="item.value" :label="item.text"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span v-if="!row[column.property + '_isEdit']">{{ row.deliverLocation }}</span>
                </template>
            </el-table-column>

        //编辑单元格事件更新
        editName(row, column) {
            if (!column.property + '_isEdit') {
                this.$set(row, column.property + '_isEdit', true);
            }
            row[column.property + '_isEdit'] = true;
            this.$nextTick(() => {

                //判断该单元格是否放置元素组件
                if (typeof this.$refs[column.property] == 'undefined') return;
                //通过对元素设置特殊属性x来定义是否能够获取焦点
                //if (this.$refs[column.property].$attrs.x) {
                console.log(this.$refs[column.property]);
                this.$refs[column.property] && this.$refs[column.property].focus()
                //}
            })

        },
        //表格触发事件
        alterData(event,row, column) {
            console.log(event,row,column);
            this.$nextTick(() => {
                row[column.property + '_isEdit'] = false;
            })
        },