<template>
  <dynamic-table :rows="rows" :columns="columns">
    <template #privacy="{display}">
      <span style="color: red">*</span>{{ display }}
    </template>
    <template #rank="{display}">
      <span style="color: red">{{ display }}</span>
    </template>
  </dynamic-table>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      rows: [{
        id: 1,
        name: '张三',
        age: 12,
        score: 558,
        rank: 3
      }, {
        id: 2,
        name: '李四',
        age: 15,
        score: 624,
        rank: 1
      }, {
        id: 3,
        name: '王五',
        age: 12,
        score: 599,
        rank: 2
      }],
      columns: [
        {
          prop: 'info', label: '基本信息', align: 'left', children: [
            { prop: 'check', label: '', type: 'selection' },
            { prop: 'id', label: 'ID' },
            { prop: 'name', label: '姓名' },
            { prop: 'age', label: '年龄' },
            {
              prop: 'privacy', label: '隐私', slotHeader: 'privacy', children: [
                { prop: 'score', label: '分数' },
                { prop: 'rank', label: '排名', slotBody: 'rank' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
