提示

• 配置rowKey主键(默认为id)
• 配置rowParentKey父类主键(默认为parentId)

普通用法

vue2

vue3

暂无数据

`defaultExpandAll`属性是否全部展开,其他用法和普通crud一致,一定要配置`rowKey`主键和`rowParentKey`父类主键，如果非懒加载树形不显示，删除据中`hasChildren`字段

<template>
  <tvue-crud v-model="form"
             :option="option"
             :data="data"
             ref="crud"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel">
    <template #icon="{ row }">
      <i :class="row.icon"
         style="font-size:24px"></i>
    </template>
    <template #menu="{ row, size }">
      <el-button :size="size"
                 text
                 type="primary"
                 @click="handleAdd(row)">新增子级</el-button>
    </template>
  </tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

const crud = ref(null)
const parentId = ref(undefined);
const form = ref({});
const data = ref([
  {
    id: 10,
    event: '事件1',
    timeLine: 50,
    comment: '无'
  },
  {
    id: 1,
    event: '事件1',
    timeLine: 100,
    comment: '无',
    children: [
      {
        parentId: 1,
        id: 2,
        event: '事件2',
        timeLine: 10,
        comment: '无'
      },
      {
        parentId: 1,
        id: 3,
        event: '事件3',
        timeLine: 90,
        comment: '无',
        children: [
          {
            parentId: 3,
            id: 4,
            event: '事件4',
            timeLine: 5,
            comment: '无'
          },
          {
            parentId: 3,
            id: 5,
            event: '事件5',
            timeLine: 10,
            comment: '无'
          }
        ]
      }
    ]
  }
]);

const option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  rowKey: 'id',
  rowParentKey: 'parentId',
  column: [
    {
      label: '事件',
      prop: 'event',
      align: 'left',
      width: 200
    },
    {
      label: '时间线',
      prop: 'timeLine'
    },
    {
      label: '备注',
      prop: 'comment'
    }
  ]
};

const rowDel = (row, index, done) => {
  done(row);
};

const rowSave = (row, done) => {
  row.parentId = parentId.value;
  row.id = new Date().getTime();
  parentId.value = undefined;
  done(row);
};

const rowUpdate = (row, index, done) => {
  done(row);
};

const handleAdd = (row) => {
  parentId.value = row.id;
  if (crud) {
    crud.value.rowAdd();
  }
};
</script>

表格树懒加载

vue2

vue3

暂无数据

`lazy`为`true`,同时接受`tree-load`函数的回调即可，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点

<template>
  <tvue-crud ref="crud"
             :option="option1"
             :data="data1"
             @tree-load="treeLoad"
             @row-save="rowSave"
             @row-update="rowUpdate">
    <template #menu="{row, size}">
      <el-button :size="size"
                 text
                 type="primary"
                 @click="handleAdd(row)">新增子级</el-button>
    </template>
  </tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

const crud = ref(null);
const parentId = ref(undefined);

const option1 = {
  lazy: true,
  rowKey: 'id',
  column: [{
    label: '姓名',
    prop: 'name'
  }, {
    label: '日期',
    prop: 'date'
  }, {
    label: '地址',
    prop: 'address',
    overHidden: true
  }]
};

const data1 = ref([
  {
    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 弄'
  }
]);

function rowDel (row, index, done) {
  done(row);
}

function rowSave (row, done) {
  row.parentId = parentId.value;
  row.id = new Date().getTime();
  parentId.value = undefined;
  done(row);
}

function rowUpdate (row, index, done) {
  done(row);
}

function handleAdd (row) {
  parentId.value = row.id;
  crud.value.rowAdd();
}

function treeLoad (tree, treeNode, resolve) {
  setTimeout(() => {
    resolve([{
      id: new Date().getTime(),
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
      hasChildren: true
    }]);
  }, 1000);
}
</script>

左树右表

vue2

vue3

一级部门

一级部门1

暂无数据

这是`tree`组件和`crud`组件的结合使用，主要是用`nodeClick`回调刷新`crud`数据

<template>
  <el-container>
    <el-aside width="200px">
      <tvue-tree :option="treeOption"
                 :data="treeData"
                 @node-click="nodeClick"></tvue-tree>
    </el-aside>
    <el-main>
      <tvue-crud :data="loadData"
                 :option="loadOption"
                 v-model="obj"></tvue-crud>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const obj = ref({});
const treeData = ref([
  {
    value: 0,
    label: '一级部门',
    children: [
      {
        value: 1,
        label: '一级部门1',
      }
    ]
  }
]);

const treeOption = {
  defaultExpandAll: true,
  formOption: {
    labelWidth: 100,
    column: [{
      label: '自定义项',
      prop: 'test'
    }],
  },
  props: {
    labelText: '标题',
    label: 'label',
    value: 'value',
    children: 'children'
  }
};

const loadData = ref([]);
const loadData1 = [
  {
    name: '张三',
    sex: '男'
  }
];
const loadData2 = [
  {
    name: '李四2',
    sex: '女'
  }
];
const loadOption = {
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
};

onMounted(() => {
  loadData.value = loadData1;
});

const nodeClick = (data) => {
  if (data.value == 0) {
    loadData.value = loadData1;
  } else if (data.value == 1) {
    loadData.value = loadData2;
  }
  console.log(JSON.stringify(data));
};
</script>