第一次接触D2

刚刚入职公司，给我分配了后台管理系统的任务，只要使用Vue框架和D2组件。刚开始想，玩的还挺花，干嘛不直接用element！最后还是被打脸了，所以，不要用自己的逻辑去揣测领导的做法！下面说一下这个组件。

D2-crud

下面是文档地址

https://d2.pub/zh/doc/d2-crud-v2/

最简单表格和element相似：:columns是动态表格头、:data="data"是数据。

 <d2-crud
 ref="d2Crud"
 :columns="columns"
 :data="data"/>

一个表格要有标题告诉用户这是什么表-- table-caption

<d2-container class="container">
    <table-caption >线上鉴定订单<black-filter @black-filter="handleBlackFilter" /></table-caption>
 <d2-crud
 ref="d2Crud"
 :columns="columns"
 :data="data"/>
</d2-container>

表格数据要进行搜索，那就用插槽，这样就吧输入框放在表格上，而且在标题下。 search-filter是我封装的子组件，里面有不同的输入框，并且通过$emit触发search函数。

 <d2-crud
 ref="d2Crud"
 :columns="columns"
 :data="data">
  <div class="content-filter" slot="header">
        <search-filter @filter-submit="search">
        </search-filter>
  </div>
</d2-crud>

如果要在表格行内进行操作，比如修改单独一行的数据，这样就可以使用了。其实就是父子传参那一套，d2-crud组件里用了@row-edit接受表格的传参

 <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
      @row-edit="handleRowEdit"
    >
data(){
    return{
        rowHandle: {
        columnHeader: '操作',
     
        custom: [
          { text: '修改', size: 'mini', type: 'primary',icon:"el-icon-info", emit: 'row-edit'},
        ]
      },
    }
}
  methods: {
  handleRowEdit({ index, row }){
  //index是第几行
  //row是这一行的数据
  console.log('修改函数')
  }
  }

一个简单表格页面就写好了

上面代码是最简单的页面，也是d2的基本功能。在文档的介绍里，功能众多，有脚手架快速建立项目，其中还封装了表格的导入导出，不过目前我还没遇到导入。