<template xmlns="http://www.w3.org/1999/html">
  <table class="list_area table_sy table table-bordered" style="width: 100%">
    <tr>
      <td style="text-align:center"><nobr>序号</nobr></td>
      <td style="text-align:center" v-for="(key,value) in jsonFields">
        <nobr>{{value}}</nobr>
      </td>
    </tr>
    <tr v-for="(index,item) in jsonModel">
      <td style="text-align:center"><nobr>{{index+1}}</nobr></td>
      <td style="text-align:center" v-for="(key,value) in jsonFields">
        <nobr>{{item[key]}}</nobr>
      </td>
    </tr>
  </table>
</template>

<script>

export default {
  // jsonStr:json字符串
  // dataJson：传入的数据
  data () {
    return {
      jsonModel: {}
    }
  },
  props: {
    dataJson: {
      type: String
    },
    jsonFields: {
      type: Object
    }
  },
  methods: {
    parseJsonData () {
      try {
        return JSON.parse(this.dataJson)
      } catch (e) {
      }
      return null
    }
  },
  watch: {
    'dataJson' (val) {
      debugger
      if (val !== null || val !== undefined) {
        this.jsonModel = this.parseJsonData()
      }
    }
  }
}
</script>
