You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.6 KiB
112 lines
2.6 KiB
Component({
|
|
/**
|
|
* 外部样式类
|
|
*/
|
|
externalClasses: ['header-row-class-name', 'row-class-name', 'cell-class-name'],
|
|
/**
|
|
* 组件样式隔离
|
|
*/
|
|
options: {
|
|
addGlobalClass: true,
|
|
multipleSlots: true // 支持多个slot
|
|
},
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
data: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
headers: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
// table的高度, 溢出可滚动
|
|
height: {
|
|
type: Number || String,
|
|
value: 'auto'
|
|
},
|
|
width: {
|
|
type: Number || String,
|
|
value: '100%'
|
|
},
|
|
// 单元格的宽度
|
|
tdWidth: {
|
|
type: Number,
|
|
value: 35
|
|
},
|
|
// 固定表头 thead达到Header的位置时就应该被fixed了
|
|
offsetTop: {
|
|
type: Number,
|
|
value: 150
|
|
},
|
|
// 是否带有纵向边框
|
|
stripe: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
// 是否带有纵向边框
|
|
border: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
msg: {
|
|
type: String,
|
|
value: '暂无数据~'
|
|
}
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
scrolWidth: '100%'
|
|
},
|
|
/**
|
|
* 组件的监听属性
|
|
*/
|
|
observers: {
|
|
// 在 numberA 或者 numberB 被设置时，执行这个函数
|
|
'headers': function headers(_headers) {
|
|
var reducer = function reducer(accumulator, currentValue) {
|
|
return accumulator + Number(currentValue.width)
|
|
}
|
|
var scrolWidth = _headers.reduce(reducer, 0)
|
|
this.setData({ scrolWidth: scrolWidth })
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
onRowClick: function(e) {
|
|
var row = this.data.data[e.currentTarget.dataset.row]
|
|
this.triggerEvent('rowClick', row)
|
|
},
|
|
onCellClick: function(e){
|
|
this.triggerEvent('cellClick', e)
|
|
},
|
|
onHeaderClick: function(e){
|
|
var index = e.currentTarget.dataset.index
|
|
var item = this.data.headers[index]
|
|
if(!item.sort){
|
|
return
|
|
}
|
|
for (let mk = 0; mk < this.data.headers.length; mk++) {
|
|
if(mk !== index && this.data.headers[mk].sort){
|
|
this.data.headers[mk].sort = 1
|
|
} else if(mk === index && this.data.headers[mk].sort){
|
|
if(this.data.headers[mk].sort == 1){
|
|
this.data.headers[mk].sort = 2
|
|
} else if(this.data.headers[mk].sort == 2){
|
|
this.data.headers[mk].sort = 3
|
|
} else if(this.data.headers[mk].sort == 3){
|
|
this.data.headers[mk].sort = 1
|
|
}
|
|
}
|
|
}
|
|
this.setData({headers: this.data.headers })
|
|
this.triggerEvent('sort', { prop: item.prop, sort: this.data.headers[index].sort })
|
|
}
|
|
}
|
|
})
|