普通用法

点击查看代码

<template>
  <div>
    <ygp-crud :data="data" :option="option">
      <template slot="expand" slot-scope="{ row }">
        <ygp-crud :data="row.children" :option="option1"></ygp-crud>
      </template>
    </ygp-crud>
  </div>
</template>

export default {
  data() {
    return {
      data: [
        {
          name: "张三",
          sex: "男",
          date: "1994-02-23 00:00:00",
          children: [
            {
              id: 1,
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              id: 2,
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              id: 3,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              hasChildren: true,
            },
            {
              id: 4,
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
        {
          name: "李四",
          sex: "女",
          date: "1994-02-23 00:00:00",
          children: [
            {
              id: 1,
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              id: 2,
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              id: 3,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              hasChildren: true,
            },
            {
              id: 4,
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
        {
          name: "王五",
          sex: "女",
          date: "1994-02-23 00:00:00",
          children: [
            {
              id: 1,
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              id: 2,
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              id: 3,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              hasChildren: true,
            },
            {
              id: 4,
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
        {
          name: "赵六",
          sex: "男",
          date: "1994-02-23 00:00:00",
          children: [
            {
              id: 1,
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              id: 2,
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              id: 3,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              hasChildren: true,
            },
            {
              id: 4,
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
      ],
      option: {
        expand: true,
        columns: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
          },
          {
            label: "日期",
            prop: "date",
          },
        ],
      },
      option1: {
        columns: [
          {
            label: "ID",
            prop: "id",
          },
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "日期",
            prop: "date",
          },
          {
            label: "地址",
            prop: "address",
            width: 250,
          },
        ],
      },
    };
  },
};