table列表中输入框input与文本span切换的实现

result.data.items.forEach((element) => {
          element.flag = true;
        });

<template slot-scope="{ row, $index }">
          <div v-show="row.flag">
            <span>{{ row.roleName }}</span>
          </div>
          <div v-show="!row.flag">
            <input type="text" v-model="role.roleName" size="mini" />
            <el-button type="warning" size="mini" @click="cancelEditRole(row)"
              >取消</el-button
            >
            <el-button type="primary" @click="saveEditRoleName(row)" size="mini"
              >确定</el-button
            >
          </div>
        </template>