105 lines
2.7 KiB
JavaScript
105 lines
2.7 KiB
JavaScript
// components/table/table/table.js
|
|
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
externalClasses: ['table-class', 'tr-class', 'td-class', 'th-class', 'tr-class_even', 'tr-class_odd'],
|
|
properties: {
|
|
colWidth: Number,
|
|
isScroll: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
header: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
list: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
showActive: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
value: '#d6e8ff'
|
|
},
|
|
maxLine: {
|
|
type: Number,
|
|
value: 2
|
|
}
|
|
},
|
|
|
|
observers: {
|
|
'header,list': function (header, list) {
|
|
this.init();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
setWidth (head) {
|
|
const colWidth = this.data.colWidth || head.length < 3 ? (730 / head.length) : 300;
|
|
const tableWidth = head.length >= 1 && this.data.isScroll ? head.length * colWidth : null;
|
|
this.setData({ tableWidth });
|
|
},
|
|
init () {
|
|
!this.data.tableWidth && this.setWidth(this.data.header);
|
|
const { list, header } = this.data;
|
|
let showHeader = JSON.parse(JSON.stringify(header));
|
|
let showList = JSON.parse(JSON.stringify(list));
|
|
showHeader.forEach((head, headIndex) => {
|
|
showList.forEach((item, index) => {
|
|
const body = header[headIndex].renderBody && header[headIndex].renderBody(item, index);
|
|
const color = header[headIndex].renderColor && header[headIndex].renderColor(item, index);
|
|
const bg = header[headIndex].renderBg && header[headIndex].renderBg(item, index);
|
|
if (body !== undefined) {
|
|
head.key = `col${headIndex}`;
|
|
item[`col${headIndex}`] = {};
|
|
item[`col${headIndex}`].text = body;
|
|
} else if (head.key) {
|
|
const text = item[head.key];
|
|
item[head.key] = { text };
|
|
}
|
|
if (color && head.key) {
|
|
item[head.key].color = color;
|
|
}
|
|
if (bg && head.key) {
|
|
item[head.key].bg = bg;
|
|
}
|
|
});
|
|
});
|
|
this.setData({ showHeader, showList });
|
|
},
|
|
checkRow (index) {
|
|
if (!this.data.showActive) {
|
|
return;
|
|
}
|
|
index = /\d+/.test(index) ? index : 0;
|
|
this.setData({ currentIndex: index });
|
|
},
|
|
onLongPress (e) {
|
|
const { index } = e.currentTarget.dataset;
|
|
this.checkRow(index);
|
|
const data = this.data.list[index];
|
|
this.triggerEvent('onLongPress', { index, data });
|
|
},
|
|
onTap (e) {
|
|
const { index } = e.currentTarget.dataset;
|
|
this.checkRow(index);
|
|
const data = this.data.list[index];
|
|
this.triggerEvent('onClick', { index, data });
|
|
}
|
|
}
|
|
});
|