el-table 处理表格数据中存在属性值为数组的情况

当返回的数据类型如下:

  tableData: [

        {

          name: '张三',

          occupation: '经理',

          experiences: [

            { id: '123456', project: '香蕉', score: '90' },

            { id: '223456', project: '菠萝', score: '91' },

            { id: '323456', project: '西瓜', score: '95' }

          ],

          gender: '男'

        },

        {

          name: '李四',

          occupation: '技术总监',

          experiences: [

            { id: '123456', project: '香蕉', score: '92' },

            { id: '423456', project: '橘子', score: '93' }

          ],

          gender: '男'

        },

        {

          name: '王二',

          occupation: '技术总监',

          experiences: [

            { id: '123456', project: '香蕉', score: '90' },

            { id: '223456', project: '菠萝', score: '91' },

            { id: '323456', project: '西瓜', score: '95' },

            { id: '423456', project: '橘子', score: '87' }

          ],

          gender: '男'

        }

      ],

展示效果如下

代码如下

<template>

  <div class="home">

    <el-table :data="tableData" stripe style="width: 100%">

 <el-table-column  width="180"

 v-for="(item,idx) in finalColumns" :key='idx' :label='item.label' :prop='item.prop'>

 </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  name: 'Home',

  components: {},

  data () {

    return {

      tableData: [

        {

          name: '张三',

          occupation: '经理',

          experiences: [

            { id: '123456', project: '香蕉', score: '90' },

            { id: '223456', project: '菠萝', score: '91' },

            { id: '323456', project: '西瓜', score: '95' }

          ],

          gender: '男'

        },

        {

          name: '李四',

          occupation: '技术总监',

          experiences: [

            { id: '123456', project: '香蕉', score: '92' },

            { id: '423456', project: '橘子', score: '93' }

          ],

          gender: '男'

        },

        {

          name: '王二',

          occupation: '技术总监',

          experiences: [

            { id: '123456', project: '香蕉', score: '90' },

            { id: '223456', project: '菠萝', score: '91' },

            { id: '323456', project: '西瓜', score: '95' },

            { id: '423456', project: '橘子', score: '87' }

          ],

          gender: '男'

        }

      ],

      data: [],

      columns: [

        { label: '姓名', prop: 'name' },

        { label: '应聘职务', prop: 'occupation' },

        { label: '', prop: 'experiences', children: [] },

        { label: '性别', prop: 'gender' }

      ],

      finalColumns: []

    }

  },

  created () {

    let max = 0

    let arr = []

    this.tableData.forEach((ele) => {

      if (max < ele.experiences.length) {

        arr = []

      }

      ele.experiences.forEach((item, idx) => {

        ele[item.id] = item.score ? item.score : '-'

        if (max < ele.experiences.length) {

          const obj = {}

          obj.label = item.project

          obj.prop = item.id

          arr.push(obj)

        }

      })

      if (max < ele.experiences.length) {

        max = ele.experiences.length

      }

    })

    console.log(this.tableData)

    this.columns.forEach(ele => {

      if (ele.prop === 'experiences') {

        ele.children = arr

      }

    })

    this.finalColumns = this.columns.reduce((sum, col) => {

      if (col.children && col.children.length) {

        sum.splice(sum.length, 0, ...col.children.map(v => v))

      } else {

        sum.splice(sum.length, 0, col)

      }

      return sum

    }, [])

    console.log(this.finalColumns, 'columns')

  }

}

</script>

巴特西

el-table 处理表格数据中存在属性值为数组的情况

最新文章

热门文章