tree-grid
基于vue和iview组件库的树型表格 主要使用了 iview(checkbox组件,icon组件,button组件) 同时部分表格渲染模仿iview表格 支持iview
DEMO 如果对您如果有帮助的话,给颗星谢谢
版本支持
VUE1.0/2.0 使用时请下载对应iview
自适应功能新增
- width 字段增加
- td总和大于容器宽宽度 出现滚动条 否则表格自适应 需要使用者下载组件后 修改源码中 document.body.clientWidth 修改为 document.getElementsByClassName('你的容器')[0].clientWidth
新增默认选中
- _checked字段增加
- 给data项设置特殊 key _checked: true
2.0 多选框样式错乱，默认选中问题
- 修改为元素checkbox 样式大概调整
- 如果样式不好看 可以自行修改或者使用其他组件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)
使用方式
<script>
import TreeGrid from './components/TreeGrid'
export default {
data() {
return {
columns: [{
type: 'selection',
width: '50',
}, {
title: '编码',
key: 'code',
sortable: true,
width: '150',
}, {
title: '名称',
key: 'name',
width: '150',
}, {
title: '状态',
key: 'status',
width: '150',
}, {
title: '备注',
key: 'remark',
width: '150',
}, {
title: '操作',
type: 'action',
actions: [{
type: 'primary',
text: '编辑'
}, {
type: 'error',
text: '删除'
}],
width: '150',
}],
data: [{
id: '1',
code: '0001',
name: '测试数据1',
status: '启用',
remark: '测试数据测试数据',
_checked: true
}, {
id: '2',
code: '0002',
name: '测试数据2',
status: '启用',
remark: '测试数据测试数据',
children: [{
id: '01',
code: '00001',
name: '测试数据01',
status: '启用',
remark: '测试数据测试数据',
}, {
id: '02',
code: '00002',
name: '测试数据02',
status: '启用',
remark: '测试数据测试数据',
}]
}, {
id: '3',
code: '0003',
name: '测试数据3',
status: '启用',
remark: '测试数据测试数据'
}, {
id: '4',
code: '0004',
name: '测试数据4',
status: '启用',
remark: '测试数据测试数据'
}]
}
},
components: {
TreeGrid
},
methods: {
rowClick(data, index, event) {
console.log('当前行数据:' + data)
console.log('点击行号:' + index)
console.log('点击事件:' + event)
},
selectionClick(arr) {
console.log('选中数据id数组:' + arr)
},
sortClick(key, type) {
console.log('排序字段:' + key)
console.log('排序规则:' + type)
}
}
}
</script>
使用方式
# 安装依赖
npm install iview
main.js 引入
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
treeGird 放入工程项目 例如 components/treeGird