双击修改输入方式

 

 <template #default="scope">
<span
      @dblclick="editCell(scope.row.id)"
      v-if="col_id !== scope.row.id">
      {{scope.row.url}}
</span>
<el-input v-else v-model="scope.row.url" @blur="editUrl(scope.row)"/>
</template >

双击拿到对应数据ID，同过ID判断显示方式 

const editCell = (id: number) => {
    col_id.value = id
}

@blur文本框失去焦点触发事件 editUrl

失去焦点后恢复状态，我这里输入的是URL地址，我用v-model双向绑定了一下

const editUrl = (row: any) => {
    col_id.value = 0
    MenuUpdateApi({
        id: row.id,
        is_show: row.is_show,
        icon: row.icon,
        leaf: row.leaf,
        level: row.level,
        order: row.order,
        pid: row.pid,
        sort: row.sort,
        status: row.status,
        tips: row.tips,
        title: row.title,
        url: row.url,
        type: row.type,
        component: row.component,
    }).then(() => {
    })
}