<template>
|
<el-card shadow="never">
|
<el-table
|
:ref="myTable.ref"
|
v-loading="myLoading"
|
:data="myTable.rows"
|
:max-height="myTable.maxHeight"
|
:height="myTable.height"
|
:size="myTable.size"
|
:cell-class-name="className"
|
selection-change="handleSelectionChange"
|
@select="handleSelect"
|
@select-all="handleSelectAll"
|
@cell-click="cellClick"
|
>
|
<el-table-column v-if="myTable.expand" type="expand">
|
<template slot-scope="{row}">
|
<el-form size="mini" label-position="left" :inline="false" class="demo-table-expand">
|
<template>
|
<el-form-item
|
v-for="(more,index) in columnHidden"
|
:key="index"
|
size="mini"
|
:label="more.title+'：'"
|
>
|
<template v-if="more.tag">
|
<el-tag size="mini" :type="more.tag(row).type">
|
{{ more.tag(row).value }} {{ more }}
|
</el-tag>
|
</template>
|
<template v-else>
|
<span v-if="more.formatter">{{ more.formatter(row) }}</span>
|
<span v-else-if="more.formatterRate">{{ more.formatterRate(row) }}</span>
|
<span v-else-if="more.formatterHigh">{{ more.formatterHigh(row).value }}</span>
|
<span v-else-if="more.switch">{{ more.switch(row).label }}</span>
|
<span v-else>{{ row[more.field] }}</span>
|
</template>
|
</el-form-item>
|
</template>
|
</el-form>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
v-if="myTable.showCheckBox"
|
type="selection"
|
width="55"
|
/>
|
|
<el-table-column
|
v-if="myTable.showIndex && myTable.page.pageSize!=undefined"
|
label="序号"
|
width="50"
|
>
|
<template slot-scope="scope">
|
<span>
|
{{ scope.$index+(myTable.page.pageNumber - 1) * myTable.page.pageSize + 1 }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="myTable.showIndex && myTable.page.pageSize==undefined"
|
type="index"
|
label="序号"
|
width="50"
|
/>
|
|
<!--show-overflow-tooltip-->
|
<template v-for="(column, index) in columnNotHidden">
|
<el-table-column
|
v-if="!(column.hidden||false)"
|
:key="index"
|
:sortable="column.sortable"
|
:label="column.title"
|
:type="column.type"
|
:width="column.width"
|
:align="column.align"
|
:header-align="column.align"
|
>
|
<template slot-scope="scope">
|
<template v-if="column.tag">
|
<el-tag size="mini" :type="column.tag(scope.row).type">
|
{{ column.tag(scope.row).value }}
|
</el-tag>
|
</template>
|
<template v-else-if="column.switch">
|
<my-switch
|
:value="column.switch(scope.row).value"
|
:check-permission="column.checkPermission"
|
:disabled="column.switch(scope.row).disabled"
|
@click="switchClick(column.switch(scope.row).click)"
|
/>
|
</template>
|
<template v-else-if="column.formatterHigh">
|
<span slot="reference" class="content-text" :style="setStyle(column.formatterHigh(scope.row))" @click="handleClick(column.formatterHigh(scope.row))">{{ column.formatterHigh(scope.row).value }}</span>
|
</template>
|
<template v-else>
|
<el-popover
|
placement="top-start"
|
trigger="click"
|
:content="getPopoverContent(scope.row,column)"
|
>
|
<span v-if="column.formatter" slot="reference" class="content-text">{{ column.formatter(scope.row) }}</span>
|
<span v-else-if="column.formatterRate" slot="reference" class="content-text"><el-rate :value="column.formatterRate(scope.row)" disabled :colors="['#99A9BF', '#F7BA2A', '#FF9900']" /></span>
|
<span v-else slot="reference" class="content-text">{{ scope.row[column.field] }}</span>
|
</el-popover>
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
|
<el-table-column
|
v-if="myTable.operation.length>0"
|
label="操作"
|
align="center"
|
:width="colWidth"
|
>
|
<template slot-scope="scope">
|
<template>
|
<div v-for="(operation, index) in myTable.operation" :key="index" style="display: inline-block">
|
<my-button
|
v-if="!(operation.hidden && operation.hidden(scope.row))"
|
:name="operation.title"
|
size="mini"
|
:type="operation.type"
|
:check-permission="operation.checkPermission"
|
@click="operation.events(scope.row)"
|
/>
|
</div>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div v-if="myTable.paging" style="margin-top: 10px;">
|
<my-paging :page="myTable.page" @search="search" />
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import myPaging from './myPaging'
|
import mySwitch from './mySwitch'
|
import myButton from '@/views/components/myButton'
|
|
export default {
|
components: { myPaging, myButton, mySwitch },
|
props: {
|
// 加载
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
table: { // 列表数据
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
parentSelectionsObject: { // 默认选中的数据
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
parentSelection: { // 默认选中的数据id
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
myLoading: false, // 加载
|
selection: [], // 存储复选框选中的ID
|
selectionObject: [], // 存储复选框选中的对象
|
myTable: {
|
ref: 'myTable', // table的名称
|
expand: true, // 是否显示展开行
|
// height: 500, // 默认高度自动单位px
|
// maxHeight: 500, //默认不设置单位px
|
size: 'medium', // Table 的尺寸 medium / small / mini
|
showCheckBox: false, // 是否显示复选框
|
showIndex: true, // 是否显示序号
|
columns: [],
|
rows: [],
|
operation: [],
|
paging: true,
|
page: {}
|
},
|
colWidth: 172// 操作列的默认宽度
|
}
|
},
|
computed: {
|
// 通过计算属性过滤掉列表中不需要显示的项目
|
columnHidden: function() {
|
return this.myTable.columns.filter(function(x) {
|
return x.hidden
|
})
|
},
|
columnNotHidden: function() {
|
return this.myTable.columns.filter(function(x) {
|
return !x.hidden
|
})
|
}
|
},
|
watch: {
|
loading(v) {
|
this.myLoading = v
|
},
|
table(e) {
|
Object.assign(this.myTable, e)
|
this.reloadCheckBox()
|
}
|
},
|
mounted() {
|
const changeTipClass = () => {
|
}
|
const Fun = function(e) {
|
e = e || window.event
|
if (e.wheelDelta) {
|
// IE/Opera/Chrome
|
changeTipClass()
|
} else if (e.detailWin) {
|
// FireFox
|
changeTipClass()
|
}
|
}
|
if (document.addEventListener) {
|
document.addEventListener('DOMMouseScroll', Fun, false)
|
} // FireFox
|
window.onmousewheel = document.onmousewheel = Fun // IE/Opera/Chrome
|
},
|
created() {
|
this.myLoading = this.loading
|
// 接受父组件传来的 选中对象 ，解析为自己可以用的数据
|
const psobj = Object.assign([], this.parentSelectionsObject)
|
if (psobj.length > 0) {
|
psobj.forEach(pso => {
|
this.selection.push(pso.id)// 存储复选框选中的ID
|
this.selectionObject.push(pso)// 存储复选框选中的对象
|
})
|
}
|
|
// 初始化table数据
|
Object.assign(this.myTable, this.table)
|
this.changeOperWidth()
|
this.reloadCheckBox()
|
},
|
methods: {
|
handleHover() {
|
console.log('滚')
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-12 18:15
|
* @Description : 设置高级格式化 formatterHigh的颜色
|
*/
|
setStyle(format) {
|
let styles = ''
|
if (format.click != undefined) {
|
styles += 'cursor: pointer;'
|
}
|
if (format.type != undefined) {
|
if (format.type == 'primary') {
|
styles += 'color:#409EFF;'
|
} else if (format.type == 'danger') {
|
styles += 'color:#F56C6C;'
|
} else if (format.type == 'success') {
|
styles += 'color:#67C23A;'
|
} else if (format.type == 'warning') {
|
styles += 'color:#E6A23C;'
|
} else if (format.type == 'info') {
|
styles += 'color:#909399;'
|
}
|
}
|
return styles
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-06-12 18:36
|
* @Description：formatterHigh点击
|
*/
|
handleClick(format) {
|
if (format.click != undefined) {
|
format.click()
|
}
|
},
|
switchClick(click) {
|
if (typeof click === 'function') {
|
click()
|
}
|
},
|
search(param) {
|
this.$emit('search', param)
|
},
|
// 单选
|
handleSelect(selection, row) {
|
// 检查selection中是否包含row，如果包含则为选中，否则取消选中
|
let _b = false
|
selection.forEach(sel => {
|
if (sel.id === row.id) {
|
_b = true
|
return false
|
}
|
})
|
if (_b) { // 包含=选中
|
if (!this.selection.includes(row.id)) {
|
this.selection.push(row.id)
|
this.selectionObject.push(row)
|
}
|
} else { // 不包含=取消选中
|
for (let m = 0; m < this.selection.length; m++) {
|
if (row.id === this.selection[m]) {
|
if (this.selection.includes(row.id)) {
|
this.selection.splice(m, 1)
|
this.selectionObject.splice(m, 1)
|
break
|
}
|
}
|
}
|
}
|
},
|
// 全选
|
handleSelectAll(selection) {
|
// 如果selection.length>0遍历，存在则忽略，不存在则添加. 否则移除本页所有数据。
|
if (selection.length > 0) { // 全选
|
// 遍历 不存在则加入
|
selection.forEach(sel => {
|
if (!this.selection.includes(sel.id)) {
|
this.selection.push(sel.id)
|
this.selectionObject.push(sel)
|
}
|
})
|
} else { // 全不选
|
this.myTable.rows.forEach(row => {
|
const index = this.selection.indexOf(row.id)
|
if (index > -1) {
|
this.selection.splice(index, 1)
|
this.selectionObject.splice(index, 1)
|
}
|
})
|
}
|
},
|
reloadCheckBox() {
|
setTimeout(() => {
|
// 重新勾选被选中项
|
try {
|
this.$refs[this.myTable.ref].clearSelection()
|
if (this.selection.length > 0) {
|
this.myTable.rows.forEach(row => {
|
for (let m = 0; m < this.selection.length; m++) {
|
if (row.id == this.selection[m]) {
|
this.$refs[this.myTable.ref].toggleRowSelection(row, true)
|
}
|
}
|
})
|
}
|
} catch (e) { console.error(e) }
|
}, 1)
|
},
|
cellClick(row, column, cell, event) {
|
this.$emit('rowClick', { row, column, cell, event })
|
},
|
|
getPopoverContent(row, column) {
|
if (column.formatterHigh) {
|
return column.formatterHigh(row).value + ''
|
} else if (column.formatter) {
|
return column.formatter(row) + ''
|
} else {
|
return row[column.field] + ''
|
}
|
},
|
// 改变操作列的宽度
|
changeOperWidth() {
|
if (this.myTable.operation.length > 2) {
|
this.colWidth = this.colWidth + 50 * (this.myTable.operation.length - 2)
|
}
|
},
|
className({ row, column, rowIndex, columnIndex }) {
|
if (column.label == '操作') {
|
return 'oper'
|
} else {
|
return ''
|
}
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-13 13:46
|
* @Description : 获取选中项
|
*/
|
getCheckedRows() {
|
return this.selectionObject
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-13 13:46
|
* @Description : 获取选中项id
|
*/
|
getCheckedIds() {
|
return this.selection
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.demo-table-expand .el-form-item{
|
width: 100%;
|
}
|
.content-text{
|
overflow:hidden;
|
text-overflow:ellipsis;
|
white-space:nowrap
|
}
|
.oper>.cell{
|
white-space: nowrap;
|
word-break:normal;
|
}
|
</style>
|
