wt_project_web_bak/src/views/home/component/params/params6.vue

<template>
  <div class='flex flex-justify-start flex-align-center flex-col'>
    <div class='flex flex-center full-width flex-justify-between mt-10 mb-10'>
      <span class='full-width text-left bold'>{{ info.dictValue }}</span>
      <el-button type='primary' @click='disabled = !disabled'>{{ disabled ? '编 辑' : '保 存' }}</el-button>
    </div>
    <div class='mt-10' style='width: 80%;'>
      {{ keys }}
      <el-form
          :model="form"
          label-width='140px'
          :disabled='disabled'
          class='form-content flex flex-col'
      >
        <div class='grid light-green-bg' v-for='item in keys' :key='item.id'>
          <div class='light-red-bg' style='width: 50%'>{{ item}}</div>
<!--          <el-form-item :label="item" style='flex:1'>-->
<!--            <el-input v-model="form.name"/>-->
<!--          </el-form-item>-->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'params6',
  props: {
    info: {
      type: Object,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  watch: {
    detail: {
      handler (val) {
        const jsonTmp = JSON.parse(val.other)
        val.other = jsonTmp
        this.keys = Object.keys(jsonTmp)
      },
      immediate: true
    }
  },
  data () {
    return {
      keys: null,
      disabled: true,
      form: {
        name: '',
        region: '',
        type: ''
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.form-content {
  border: 1px solid #eeeeee;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
}
</style>