Use of vue-table-with-tree-grid in Vue

Install

npm i vue-table-with-tree-grid -S
//或
yarn add vue-table-with-tree-grid

use

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
//或者
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(ZkTable.name, ZkTable)

Attributes
Insert image description here
Insert image description here

Insert image description here

Insert image description here

 <zk-table
      ref="table"
      sum-text="sum"
      index-text="#"
      :data="data"
      :columns="columns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType">
      <template slot="$expand" scope="scope">
        {
    
    {
    
     `My name is ${
      
      scope.row.name},
           this rowIndex is ${
      
      scope.rowIndex}.`
         }}
      </template>
      <template slot="likes" scope="scope">
        {
    
    {
    
     scope.row.likes.join(',') }}
      </template>
    </zk-table>

    data() {
    
    
      return {
    
    
        props: {
    
    
          stripe: false,
          border: false,
          showHeader: true,
          showSummary: false,
          showRowHover: true,
          showIndex: false,
          treeType: true,
          isFold: true,
          expandType: false,
          selectionType: false,
        },

Guess you like

Origin blog.csdn.net/weixin_59739381/article/details/131817516