新增默認選中
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) |
使用方式
<template><tree-grid :items='data' :columns='columns'@on-row-click='rowClick'@on-selection-change='selectionClick'@on-sort-change='sortClick'></tree-grid>
</template>
<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>
