表格树形,级联选择器

第一步：先下载第三方插件

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

第二步：全局引用插件在main.js

import ZkTable from 'vue-table-with-tree-grid'
//Vue.component('组件名', 实列组件)
Vue.component('tree-table', ZkTable)

第三步在要用的页面使用

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="treeable"
          :data="cateList"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          :show-row-hover="false"
          index-text="#"
          show-index
          border
        >
          <template slot-scope="scope" slot="likes">
            <i
              v-if="!scope.row.cat_deleted"
              class="el-icon-success"
              style="color: #39ce39"
            ></i>
            <i v-else class="el-icon-error" style="color: red"></i>
          </template>
      <template slot-scope="scope" slot="one">
       <el-tag effect="dark"size="mini":type="btn[scope.row.cat_level]">
            {{ (scope.row.cat_level + "") | getRights }}
         </el-tag>
      </template>
 </tree-table>
 data(){
 columns: [
      {
       label: "分类名称",
        prop: "cat_name",
      },
      {
        label: "是否有效",
        prop: "cat_deleted",
        type: "template",
        template: "likes",
      },
      {
        label: "排序",
        prop: "cat_level",
        type: "template",
        template: "one",
      },
      {
        label: "操作",
        //自定义模板
        type: "template",
        //模板名字
        template: "operation",
     },
   ],
 }

树形表格第三方插件
https://www.npmjs.com/package/vue-table-tree-grid

级联选择器

//value:选中绑定数据
//options:可选项数据源，键名可通过 Props 属性配置
 <el-form-item label="父级分类">
    <el-cascader
     v-model="value"
     :options="cateList"
     :props="defaultProps"
     @change="handleChange"
    ></el-cascader>
</el-form-item>
 defaultProps:{
  expandTrigger: 'hover' ,//hover鼠标划上去高亮
  label:"cat_name",//数据name
  value:'cat_id',//数据id
 children:'children'//每个对象里有children
},
value:[],
cateList: [],