vue--iview-tree-table v1.0.3

tree-grid 基于vue和iview组件库的树型表格 主要使用了 iview(checkbox组件,icon组件,button组件) 同时部分表格渲染模仿iview表格 支持iview

DEMO 如果对您如果有帮助的话,给颗星谢谢 版本支持 VUE1.0/2.0 使用时请下载对应iview

自适应功能新增 1. width 字段增加 2. td总和大于容器宽宽度 出现滚动条 否则表格自适应 需要使用者下载组件后 修改源码中 document.body.clientWidth 修改为 document.getElementsByClassName('你的容器')0.clientWidth 新增默认选中 1. _checked字段增加 2. 给data项设置特殊 key _checked: true 2.0 多选框样式错乱，默认选中问题 1. 修改为元素checkbox 样式大概调整 2. 如果样式不好看 可以自行修改或者使用其他组件ui checkbox API props 属性 说明 类型 items 显示的结构化数据 Array columns 表格列的配置描述 Array columns 属性 说明 类型 默认值 title 列头显示文字 String # key 对应列内容的字段名 String # width 列宽名 Number # sortable 排序功能 Boolean false type 'selection':多选功能 String # type 'action' 操作功能, 必填参数:actions:{} String # events 事件名 说明 返回值 @on-row-click 单击行或者单击操作按钮方法 data,$event,index @on-selection-change 返回选中数组 arr @on-sort-change 表格列的配置描述 key和排序规则(值为 asc 或 desc) 使用方式 <tree-grid :items='data' :columns='columns' @on-row-click='rowClick' @on-selection-change='selectionClick' @on-sort-change='sortClick'

  ></tree-grid>

main.js 引入 import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView);

treeGird 放入工程项目 例如 components/treeGird