vue-mobile-table
Version:
移动端表格、列表组件，支持虚拟滚动
70 lines (67 loc) • 1.9 kB
JavaScript
import commonMixIn from './mixin'
export default {
name: 'table-row',
mixins:[commonMixIn],
props: {
index: { // 每一行的索引
type: Number
},
itemHeight: {
type: Number,
default: 70,
},
source: { // 每一行的内容
type: Object,
default() {
return {}
}
},
store: {
type: Object,
default() {
return {}
}
},
fixed: {
type: Boolean,
default: false,
},
defaultFixItemWidth: '',
borderConfig: {
type:Object,
default:()=>({
innerBorder:true,
color:'#e8eaec',
borderType:'solid'
})
},
},
computed: {
data() { //获取状态管理器中的列表数据
return this.store.states.data;
},
columns() { //获取状态管理器中的列定义
return this.store.states.columns;
}
},
methods: {
},
render: function (createElement) {
return createElement("div", { class: { "vue-mobile-content-row": true } }, [createElement('div', { class: { 'vue-mobile-content-row-wrap': true } },
// this.fixed ? column.fixed : !column.fixed
this.columns.filter(column => !this.fixed ? !column.fixed : this.itemHeight ? column.fixed : true).map((column) => {
return createElement('div', {
class: { 'mobile-table-cell': true},
style: {
flex: this.getFlex(column),
width: this.getWidth(column, this.defaultFixItemWidth),
minWidth: this.getMinWidth(column),
height: this.transformPX(this.itemHeight),
justifyContent: this.getAlign(column.align),
borderBottom:this.borderConfig.innerBorder?`1px ${this.borderConfig.borderType} ${this.borderConfig.color}`:'none'
}
}, [column.renderCell.call(null, createElement, { row: this.source })])
}),
)])
}
}