Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
879ee292 by renchao@pashanhoo.com
Options

1

1 parent fcfe609b
Inline Side-by-side
Showing 2 changed files with 0 additions and 512 deletions
/*
* FileName: lb-table.vue
* Remark: element table
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:55:27 am
* Last Modified: Tuesday, 19th March 2019 9:55:34 am
* Modified By: 任超
*/
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
:border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection"
:header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
:data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
</template>
</el-table-column>
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader'
:header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
</template>
</el-table-column>
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<br>
<el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
:page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
:style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
</el-pagination>
</div>
</template>
<script>
import LbColumn from './lb-column'
export default {
props: {
column: Array,
data: Array,
spanMethod: Function,
pagination: {
type: Boolean,
default: true,
},
isRadio: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: true,
},
showHeader: {
type: Boolean,
default: true,
},
paginationTop: {
type: String,
default: '0',
},
heightNum: {
type: Number,
default: 265,
},
maxHeight: {
type: Number,
default: 500
},
heightNumSetting: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
paginationAlign: {
type: String,
default: 'left',
},
merge: Array,
},
components: {
LbColumn,
},
data () {
return {
tableHeight: '',
mergeLine: {},
mergeIndex: {},
selected: ''
}
},
created () {
this.getMergeArr(this.data, this.merge)
this.getHeight()
},
computed: {
dataLength () {
return [] || this.data.length
},
},
methods: {
// 单选
singleElection (row) {
this.selected = this.data.indexOf(row);
},
tableRowClassName ({ row, rowIndex }) {
if (rowIndex % 2 === 1) {
return 'interlaced';
}
},
getHeight () {
if (!this.heightNumSetting) {
this.tableHeight = window.innerHeight - this.heightNum
}
},
clearSelection () {
this.$refs.elTable.clearSelection()
},
toggleRowSelection (row, selected) {
this.$refs.elTable.toggleRowSelection(row, selected)
},
toggleAllSelection () {
this.$refs.elTable.toggleAllSelection()
},
toggleRowExpansion (row, expanded) {
this.$refs.elTable.toggleRowExpansion(row, expanded)
},
setCurrentRow (row) {
this.$refs.elTable.setCurrentRow(row)
},
clearSort () {
this.$refs.elTable.clearSort()
},
clearFilter (columnKey) {
this.$refs.elTable.clearFilter(columnKey)
},
doLayout () {
this.$refs.elTable.doLayout()
},
sort (prop, order) {
this.$refs.elTable.sort(prop, order)
},
paginationCurrentChange (val) {
this.$emit('p-current-change', val)
},
getMergeArr (tableData, merge) {
if (!merge) return
this.mergeLine = {}
this.mergeIndex = {}
merge.forEach((item, k) => {
tableData.forEach((data, i) => {
if (i === 0) {
this.mergeIndex[item] = this.mergeIndex[item] || []
this.mergeIndex[item].push(1)
this.mergeLine[item] = 0
} else {
if (data[item] === tableData[i - 1][item]) {
this.mergeIndex[item][this.mergeLine[item]] += 1
this.mergeIndex[item].push(0)
} else {
this.mergeIndex[item].push(1)
this.mergeLine[item] = i
}
}
})
})
},
mergeMethod ({ row, column, rowIndex, columnIndex }) {
const index = this.merge.indexOf(column.property)
if (index > -1) {
const _row = this.mergeIndex[this.merge[index]][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
},
watch: {
merge () {
this.getMergeArr(this.data, this.merge)
},
dataLength () {
this.getMergeArr(this.data, this.merge)
}
},
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.lb-table {
margin-top: 1px;
.interlaced {
background: #fafcff;
border: 1px solid #ebf2fa;
}
}
/deep/.el-table .cell {
padding-left: 3px;
padding-right: 3px;
}
.table-radio {
/deep/.el-radio__label {
display: none;
}
}
/deep/.el-radio {
margin-right: 5px !important;
}
</style>
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
:height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index"></el-radio>
</template>
</el-table-column>
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<el-table v-else ref="elTable" id="heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }"
:border='border' :row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs"
:max-height="maxHeight" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index"></el-radio>
</template>
</el-table-column>
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<br>
<el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
layout="total, prev, pager, next" @current-change="paginationCurrentChange"
:style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
</el-pagination>
</div>
</template>
<script>
import LbColumn from './lb-column'
export default {
props: {
column: Array,
data: Array,
spanMethod: Function,
pagination: {
type: Boolean,
default: true,
},
isRadio: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
paginationTop: {
type: String,
default: '0',
},
heightNum: {
type: Number,
default: 355,
},
maxHeight: {
type: Number,
default: 500
},
minHeight: {
type: Number,
default: undefined
},
heightNumSetting: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
paginationAlign: {
type: String,
default: 'left',
},
calcHeight: {
type: Number,
default: 170
},
merge: Array,
},
components: {
LbColumn,
},
data () {
return {
tableHeight: 'auto',
mergeLine: {},
mergeIndex: {},
selected: ''
}
},
created () {
this.getMergeArr(this.data, this.merge)
this.getHeight()
},
computed: {
dataLength () {
return [] || this.data.length
},
},
methods: {
// 单选
singleElection (row) {
this.selected = this.data.indexOf(row);
},
tableRowClassName ({ row, rowIndex }) {
if (rowIndex % 2 === 1) {
return 'interlaced';
}
},
getHeight () {
if (!this.heightNumSetting) {
let _this = this
if (this.heightNum) {
_this.$nextTick(() => {
if (document.querySelector(".tags-view-container")) {
window.addEventListener('resize', () => {
if (_this.calcHeight == 230) {
_this.tableHeight = _this.calcHeightx(192)
} else {
_this.tableHeight = _this.calcHeightx(_this.calcHeight)
}
});
if (_this.calcHeight == 230) {
_this.tableHeight = _this.calcHeightx(192)
} else {
_this.tableHeight = _this.calcHeightx(_this.calcHeight)
}
} else {
window.addEventListener('resize', () => {
_this.tableHeight = _this.calcHeightx(_this.calcHeight)
});
_this.tableHeight = _this.calcHeightx(_this.calcHeight)
}
})
} else {
_this.tableHeight = window.innerHeight - _this.heightNum
}
} else {
this.tableHeight = this.heightNum
this.$nextTick(() => {
this.minHeight && (document.getElementById('heightNumSetting').style.minHeight = this.minHeight + 'px')
})
}
},
calcHeightx (value, wappered = true) {
//项目自定义的公共header部分的高度，可忽略
let header = document.querySelector(".from-clues-header").offsetHeight;
//value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
value = value == undefined ? 100 : value;
if (document.querySelector(".tags-view-container")) {
let tagsView = document.querySelector(".tags-view-container").offsetHeight;
var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
} else {
var res = window.innerHeight - parseInt(header) - value;
}
if (wappered) {
//通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
//通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
let header = window.document.getElementsByClassName('el-table__header-wrapper');
//必须加延时，要不然赋不上去值
setTimeout(() => {
//通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
wapper[0].style.height = (value - header[0].clientHeight)
}, 100)
}
return res;
},
clearSelection () {
this.$refs.elTable.clearSelection()
},
toggleRowSelection (row, selected) {
this.$refs.elTable.toggleRowSelection(row, selected)
},
toggleAllSelection () {
this.$refs.elTable.toggleAllSelection()
},
toggleRowExpansion (row, expanded) {
this.$refs.elTable.toggleRowExpansion(row, expanded)
},
setCurrentRow (row) {
this.$refs.elTable.setCurrentRow(row)
},
clearSort () {
this.$refs.elTable.clearSort()
},
clearFilter (columnKey) {
this.$refs.elTable.clearFilter(columnKey)
},
doLayout () {
this.$refs.elTable.doLayout()
},
sort (prop, order) {
this.$refs.elTable.sort(prop, order)
},
paginationCurrentChange (val) {
this.$emit('p-current-change', val)
},
getMergeArr (tableData, merge) {
if (!merge) return
this.mergeLine = {}
this.mergeIndex = {}
merge.forEach((item, k) => {
tableData.forEach((data, i) => {
if (i === 0) {
this.mergeIndex[item] = this.mergeIndex[item] || []
this.mergeIndex[item].push(1)
this.mergeLine[item] = 0
} else {
if (data[item] === tableData[i - 1][item]) {
this.mergeIndex[item][this.mergeLine[item]] += 1
this.mergeIndex[item].push(0)
} else {
this.mergeIndex[item].push(1)
this.mergeLine[item] = i
}
}
})
})
},
mergeMethod ({ row, column, rowIndex, columnIndex }) {
const index = this.merge.indexOf(column.property)
if (index > -1) {
const _row = this.mergeIndex[this.merge[index]][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
},
watch: {
merge () {
this.getMergeArr(this.data, this.merge)
},
dataLength () {
this.getMergeArr(this.data, this.merge)
}
},
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.lb-table {
margin-top: 1px;
.interlaced {
background: #fafcff;
border: 1px solid #ebf2fa;
}
}
/deep/.el-table .cell {
padding-left: 3px;
padding-right: 3px;
}
/deep/.el-radio__label {
display: none;
}
</style>