1.vue全局组件
ponent('组件名',组件实例)import ZkTable from 'vue-table-with-tree-grid'ponent('tree-table', ZkTable)import BreadCrumb from '@/components/breadcrumb'ponent('bread-crumb', BreadCrumb)
2.vue-table-with-tree-grid使用及插件参数使用说明
1.安装vue-table-with-tree-gridnpm i vue-table-with-tree-grid -S2.在main.js中引入import ZkTable from 'vue-table-with-tree-grid'3.在main.js中引入注册全局组件ponent('tree-table', ZkTable)import BreadCrumb from '@/components/breadcrumb'ponent('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-tableclass="treeTable":data="goodsCate":columns="columns":selection-type="false":expand-type="false"show-indexindex-text="#"border:show-row-hover="false"><template slot="isOk" slot-scope="scope"><div><iv-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-cascaderexpand-trigger="hover"//指定数据源:options="parentCateList"//指定配置项:props="cascaderProps"//绑定级别数据v-model="selectedKeys"//级联改变后的事件处理函数@change="parentCateChanged"clearablechange-on-select></el-cascader>
