生活随笔
收集整理的這篇文章主要介紹了
iview table 方法若干
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
新增默認(rèn)選中
1. _checked字段增加
2. 給data項設(shè)置特殊 key
_checked: true
2.0 多選框樣式錯亂，默認(rèn)選中問題
1. 修改為元素checkbox 樣式大概調(diào)整2. 如果樣式不好看 可以自行修改或者使用其他組件ui checkbox
API
props
屬性說明類型
| items | 顯示的結(jié)構(gòu)化數(shù)據(jù) | Array |
| columns | 表格列的配置描述 | Array |
columns
屬性說明類型默認(rèn)值
| title | 列頭顯示文字 | String | # |
| key | 對應(yīng)列內(nèi)容的字段名 | String | # |
| width | 列寬名 | Number | # |
| sortable | 排序功能 | Boolean | false |
| type | 'selection':多選功能 | String | # |
| type | 'action' 操作功能, 必填參數(shù):actions:[{}] | String | # |
events
事件名說明返回值
| @on-row-click | 單擊行或者單擊操作按鈕方法 | data,$event,index |
| @on-selection-change | 返回選中數(shù)組 | arr |
| @on-sort-change | 表格列的配置描述 | key和排序規(guī)則(值為 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: '狀態(tài)',
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: '測試數(shù)據(jù)1',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)',
_checked: true
}, {
id: '2',
code: '0002',
name: '測試數(shù)據(jù)2',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)',
children: [{
id: '01',
code: '00001',
name: '測試數(shù)據(jù)01',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)',
}, {
id: '02',
code: '00002',
name: '測試數(shù)據(jù)02',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)',
}]
}, {
id: '3',
code: '0003',
name: '測試數(shù)據(jù)3',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)'
}, {
id: '4',
code: '0004',
name: '測試數(shù)據(jù)4',
status: '啟用',
remark: '測試數(shù)據(jù)測試數(shù)據(jù)'
}]
}
},
components: {
TreeGrid
},
methods: {
rowClick(data, index, event) {
console.log('當(dāng)前行數(shù)據(jù):' + data)
console.log('點擊行號:' + index)
console.log('點擊事件:' + event)
},
selectionClick(arr) {
console.log('選中數(shù)據(jù)id數(shù)組:' + arr)
},
sortClick(key, type) {
console.log('排序字段:' + key)
console.log('排序規(guī)則:' + type)
}
}
}
</script>
總結(jié)
以上是生活随笔為你收集整理的iview table 方法若干的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
