vue input中展示JSON數據時格式化展示

      <el-form
        ref="taskDictForm"
        :model="taskDictForm"
        label-width="120px"
        :rules="taskDictFormRules"
      >
        <el-form-item label="任務參數" prop="taskParm">
          <el-input
            type="textarea"
            :rows="3"
            size="mini"
            style="width: 90%;"
            v-model="taskDictForm.taskParm"
            placeholder="JSON格式"
          ></el-input>
        </el-form-item>
      </el-form>

    editTaskDict(row) {
      this.taskDictForm = row
      if (row.taskParm) {
        try {
          let taskParm = JSON.parse(row.taskParm)
          this.taskDictForm.taskParm = JSON.stringify(taskParm, null, 4)
        } catch (err) {}
      }
      this.taskDictDialog = true
    }

展示出來就會是這樣的：

 其中提交的時候保證存入數據庫的是json格式的，加了rules校驗

 

 出錯了也要 callback 不然提交的時候返回的一直是false

    var validateJSON = (rule, value, callback) => {
      if (value) {
        try {
          JSON.parse(value)
        } catch (err) {
          callback(new Error('任務參數JSON格式有誤'))
        }
        callback()
      }
    }

      taskDictFormRules: {
        taskParm: [{ validator: validateJSON, trigger: 'blur' }]
      }