helloWorld

153 阅读1分钟
<ListX :areaData="areaDataNotLevel"></ListX>
<script>

import ImageView from './ImageView.vue'

import List from './list.vue'

import ListX from './list2.vue'

import { areaData } from '../data'

export default {

  components: { ImageView, List, ListX },

  name: 'HelloWorld',

  created() {

    this.areaDataNotLevel = [

      { code: '', levelx: 0, name: '全部' },

      ...this.initData(areaData, 0)

    ]

  },

  data() {

    return {

      areaDataNotLevel: []

    }

  },




  methods: {

    initData(data, index) {

      data.forEach((item) => {

        item.levelx = index

        if (item && item.areaList) {

          this.initData(item.areaList, index + 1)

        }

      })

      return data

    }

  }

}

</script>




<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1,

h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

.hello {

  display: flex;

  align-items: center;

  margin-left: auto;

}

.hello > div {

  margin-left: 20px;

}

</style>