Vue全局组件与Cascader级联选择器：实战教程-优快云博客

一、vue全局组件

第三方插件npm.js地址：https://www.npmjs.com/package/vue-table-tree-grid
关于后台管理的框架不只是有element-ui，他还有第三方的框架

安装命令：npm i vue-table-with-tree-grid -S

下载yarn的话可以用：yarn add vue-table-with-tree-grid

在main.js中引入：
import ZkTable from 'vue-table-with-tree-grid'
使用规范：
Vue.component('组件名',组件实例)

二、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：是否鼠标经过时高亮

例如：
 <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>

三、Cascader 级联选择器

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