vue-table-with-tree-grid使用及插件参数使用说明

1.安装vue-table-with-tree-grid

npm i vue-table-with-tree-grid -S

2.在main.js中引入

import ZkTable from 'vue-table-with-tree-grid'

3.在main.js中引入

注册全局组件Vue.component('tree-table', ZkTable)

	<!-- 
      vue-table-with-tree-grid插件参数使用说明：
      1.data:指定数据源
      2.columns:指定每列配置选项，是数组形式[{},{},{}]，其中一个对象是一列
      3.selection-type:是否出现复选框，true：代表出现，false：隐藏
      4.expand-type:是否出现展开或折叠
      5.show-index: 显示序号
      6.index-text:显示序号标题文本
      7.border:是否加竖线边框
      8.show-row-hover：是否鼠标经过时高亮
   -->

  <tree-table
    class="treeTable"
    :data="goodsCate"
    :columns="columns"
    :selection-type="false"
    :expand-type="false"
    show-index
    index-text="#"
    border
    :show-row-hover="false"
  >
    <template slot="isOk" slot-scope="scope">
      <div>
        <i
          v-if="!scope.row.cat_deleted"
          class="el-icon-success"
          style="color: #0f0; font-size: 16px"
        ></i>
        <i v-else class="el-icon-error"></i>
      </div>
    </template>

    <template slot="isSort" slot-scope="scope">
      <div>
        <el-tag :type="types[scope.row.cat_level]">
          {{ (scope.row.cat_level + "") | ranks }}</el-tag
        >
      </div>
    </template>

    <template slot="opt" slot-scope="scope">
      <div>
        <el-button size="mini" type="primary" icon="el-icon-edit"
          >编辑</el-button
        >
        <el-button size="mini" type="danger" icon="el-icon-delete"
          >删除</el-button
        >
      </div>
    </template>
  </tree-table>