vue點擊編輯按鈕，內容變成input可以修改，也可以刪除

一、效果

圖1

圖2，點擊報錯之后，又變成圖1的效果

二、使用到了element UI中的以下組件：

<el-button>

<el-input>

三、使用的關鍵點是vue中的v-if指令

四、關鍵代碼如下

HTML部分

      <div class="content-wrapper">
        <div>
          <el-button type="primary" icon="el-icon-plus" @click.stop="handleShowDialog(0)">添加街道</el-button>
          <el-button type="primary" icon="el-icon-edit" @click.stop="handleEditStreet">編輯</el-button>
          <el-button type="primary" icon="el-icon-setting" @click.stop="handleSaveStreet">保存</el-button>
        </div>
        <div class="street-wrapper">
          <template v-for="(item, index) in streetsData">
            <el-button v-if="!isEditStreet" :type="activeButton === index ? 'primary' : 'info'" :key="index"
              @click.stop="handleButtonClick(index)">{{item.name}}</el-button>
            <el-input v-else-if="isEditStreet" :key="index" v-model="item.name" style="width:300px;margin-right:5px;margin-bottom:5px;">
              <i slot="append" class="remove el-icon-remove"></i>
            </el-input>
          </template>
        </div>
      </div>

JS部分

<script>
export default {
  name: 'official',
  data () {
    return {
      activeButton: 0,
      dialogTitle: '添加街道', // 控制彈出框title的變量
      dialogVisible: false, // 彈出框顯示隱藏的控制變量
      isAddStreet: true, // true表示是添加街道數據，false表示添加的是社區工作站的數據
      streetNameOrCommunityName: '', // 添加的時候用於保存街道的名稱獲取社區工作站的名稱
      isEditStreet: false, // 編輯街道
      isEditCommunity: false, // 編輯社區
      streetsData: [
        {id: 1, name: '觀湖街道'},
        {id: 1, name: '民治街道'},
        {id: 3, name: '觀瀾街道'},
        {id: 4, name: '龍華街道'},
        {id: 5, name: '大浪街道'},
        {id: 6, name: '福城街道'}
      ],
      communityData: [
      ]
    }
  },
  methods: {
    handleButtonClick (index) {
      this.activeButton = index
    },
    /**
     * flag:0表示添加街道，1表示添加社區
     */
    handleShowDialog (flag) {
      this.isAddStreet = !flag
      this.dialogTitle = flag ? '添加社區工作站' : '添加街道'
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    addStreetOrCommunity () {
      // 校驗輸入的內容不能為空
      if (!this.streetNameOrCommunityName.length) {
        this.$message.error('填寫的名稱不能為空或者空字符串')
        return
      }
      // 1.校驗一下當前添加的街道名稱是否已經存在？？街道名稱是唯一的
      // 2.添加成功之后，關閉彈出框，並且要重新請求數據
      if (this.isAddStreet) {
        // 調用添加街道的接口
        this.streetsData.push({id: 10, name: this.streetNameOrCommunityName})
      } else {
        // 調用社區工作站的接口
        this.communityData.push({id: 10, name: this.streetNameOrCommunityName})
      }
      // 清空streetNameOrCommunityName的數據，避免下次添加的時候顯示上次的數據
      this.streetNameOrCommunityName = ''
      this.dialogVisible = false
    },
    handleBeforeClose (done) {
      this.dialogVisible = false
      done()
    },
    handleEditCommunity () {
      this.isEditCommunity = true
    },
    handleSaveCommunity () {
      this.isEditCommunity = false
    },
    handleEditStreet () {
      this.isEditStreet = true
    },
    handleSaveStreet () {
      this.isEditStreet = false
    },
    enterSystem () {
      this.$router.push('/dashboard')
    }
  }
}
</script>