elementui делает редактируемые строки таблицы

При нажатии кнопки редактирования определенной строки ячейка становится доступной для ввода, а после нажатия кнопки «Сохранить» она становится чистым состоянием отображения.

Эффект следующий:

 шаг: 

(1) Редактируемым и отображаемым ячейкам требуется два состояния: одно обернуто тегом ввода, а другое — тегом span. Эти два состояния находятся во взаимоисключающем состоянии. Привяжите значение через v-if, чтобы сделать их обратными и отображается

      <el-table-column
        prop="videoName"
        label="视频名称"
        align="center"
        width="250"
      >
        <template slot-scope="scope">
          <!-- 编辑状态下显示 -->
          <el-input
            v-if="isshow[scope.$index]"
            type="text"
            size="mini"
            clearable
            v-model.trim="scope.row.videoName"
          />
          <!-- 展示状态下显示 -->
          <span v-if="!isshow[scope.$index]">{
   
   { scope.row.videoName }}</span>
        </template>
      </el-table-column>

(2) Также необходимы две кнопки управления, одна кнопка редактирования и одна кнопка сохранения. Эти две кнопки находятся во взаимоисключающем состоянии. Привяжите значение через v-if, чтобы они перевернулись и отобразились

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="isshow[scope.$index]"
            size="mini"
            type="success"
            icon="el-icon-check"
            @click="handelCheck(scope.$index)"
          />
          <el-button
            v-if="!isshow[scope.$index]"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index)"
          />
        </template>
      </el-table-column>

(3) Измените это значение с помощью метода this.$set, начальное значение isshow — это пустой массив, который является глобальной переменной.

  data() {
    return {
      // 控制参数表格输入显示
      isshow: [],
    };

  methods: {
    /**
     * @description: 编辑单行数参数
     * @param {index} 当前行索引值
     * @return void
     */
    handleEdit(index) {
      this.$set(this.isshow, index, true);
    },

    /**
     * @description: 保存单行参数
     * @param {index} 当前行索引值
     * @return void
     */
    handelCheck(index) {
      this.$set(this.isshow, index, false);
    },
  },