vue-table-with-tree-grid

1.vue全局组件

Vue.component('组件名',组件实例)


import ZkTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', ZkTable)

import BreadCrumb from '@/components/breadcrumb'
Vue.component('bread-crumb', BreadCrumb)

2.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)

import BreadCrumb from '@/components/breadcrumb'
Vue.component('bread-crumb', BreadCrumb)
  
  <!-- 
          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>

3.Cascader 级联选择器

 <!-- props 用来指定配置对象 -->
 <el-cascader
   expand-trigger="hover"
   //指定数据源
   :options="parentCateList"
   //指定配置项
   :props="cascaderProps"
   //绑定级别数据
   v-model="selectedKeys"
   //级联改变后的事件处理函数
   @change="parentCateChanged"
   clearable
   change-on-select
 >
 </el-cascader>