Crud 模块

树形表格

树型 - 图1

这是tree组件和crud组件构建的一个常用的页面

  1. <div style="display:flex">
  2.   <avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption" @node-click="nodeClick"></avue-tree>
  3.   <avue-crud :data="data" :option="option"></avue-crud>
  4. </div>
  6. <script>
  7.   export default {
  8.     data() {
  9.       return {
  10.         obj:{},
  11.         data: [
  12.           {
  13.             name:'张三',
  14.             sex:'男'
  15.           }, {
  16.             name:'李四',
  17.             sex:'女'
  18.           }, {
  19.             name:'王五',
  20.             sex:'女'
  21.           }, {
  22.             name:'赵六',
  23.             sex:'男'
  24.           }
  25.         ],
  26.         option:{
  27.           page:false,
  28.           align:'center',
  29.           menuAlign:'center',
  30.           column:[
  31.              {
  32.               label:'姓名',
  33.               prop:'name'
  34.             }, {
  35.               label:'性别',
  36.               prop:'sex'
  37.             }
  38.           ]
  39.         },
  40.         treeData:[
  41.           {
  42.             id:0,
  43.             label:'一级部门',
  44.             value:0,
  45.             children:[
  46.               {
  47.                 id:1,
  48.                 label:'一级部门1',
  49.                 value:0,
  50.               },{
  51.                 id:2,
  52.                 label:'一级部门2',
  53.                 value:0,
  54.               }
  55.             ]
  56.           },{
  57.             id:3,
  58.             label:'二级部门',
  59.             value:0,
  60.             children:[
  61.               {
  62.                 id:4,
  63.                 label:'二级部门1',
  64.                 value:0,
  65.               },{
  66.                 id:5,
  67.                 label:'二级部门2',
  68.                 value:0,
  69.               }
  70.             ]
  71.           }
  72.         ],
  73.         treeOption:{
  74.           nodeKey:'id',
  75.           props:{
  76.             labelText:'标题',
  77.             label:'label',
  78.             value:'value',
  79.             children:'children'
  80.           }
  81.         }
  82.       }
  83.     },
  84.     methods: {
  85.       nodeClick(data){
  86.         this.$message.success('点击回调')
  87.       }
  88.     }
  89.   }
  90. </script>