monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 4560ff8bd3e75b3b47c07ab5452c6a66e648df1e 1 parent 2c4b7cc8

组件迁移

Inline Side-by-side
Showing 2 changed files with 108 additions and 117 deletions
<div>
<div >
<!-- 表格-->
<el-table :border="showBorder" :data="dataList" :default-expand-all="defaultExpand" :expand-row-keys="expands"
:height="height" :row-key="getRowKeys" :size="size" @select="handleSelect"
@select-all="handleSelectAll"
@selection-change="handleSelectionChange" header-row-class-name="tbl-header-class" ref="multipleTable"
stripe
style="width: 100%;margin: 0px 0px; font-size:13.5px;" v-loading="loading"
<el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands" :default-expand-all="defaultExpand"
@select="handleSelect" @select-all="handleSelectAll"
>
<el-table-column type="expand" v-if="showExpand">
<template #default="scope">
<slot :scope="scope" name="expand">
<slot name="expand" :scope="scope" >
</slot>
</template>
</el-table-column>
<el-table-column align="center" type="selection" v-if="showSelection && columns.length > 0" width="55"/>
<el-table-column :label="indexLabel" align="center" type="index" v-if="showIndex && columns.length > 0"
width="50"/>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="80"/>
<el-table-column :align="item.align == undefined ? 'center' : item.align " :label="item.label" :prop="item.prop"
:sortable="item.sortable == undefined ? false : item.sortable"
:width="getWidth(item.width)"
v-for="item in columns">
<template v-if="!item.columns || item.columns.lendth==0" #default="scope">
<slot :column="item" :prop="item.prop" :row="scope.row">
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span @click="item.click(scope.row)" style="cursor: pointer"
v-html="item.render(scope.row)"></span>
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
:width="getWidth(item.width)">
<template #default="scope">
<slot :row="scope.row" :prop="item.prop" :column="item">
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
</div>
<div v-else-if="typeof(item.click) == 'function'">
<span @click="item.click(scope.row)" style="cursor: pointer"> {{scope.row[item.prop]}}</span>
<div v-else-if="typeof(item.click) == 'function'" >
<span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span>
</div>
<div v-else-if="typeof(item.render) == 'function'">
<div v-else-if="typeof(item.render) == 'function'" >
<span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span>
</div>
<span v-else>
<el-tooltip placement="top">
<template #content>
<el-tooltip placement="top-start" :disabled="scope.row.isShowTooltip == undefined || scope.row.isShowTooltip == false">
<template #content >
<div v-html="getTextContent(scope.row[item.prop])">
</div>
</template>
<div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
<div class="text-overflow-line2" @mouseenter="tableColMouseenter($event,scope.row)">
{{scope.row[item.prop]}}
</div>
</el-tooltip>
</span>
</slot>
</template>
<el-table-column v-else :align="columnItem.align == undefined ? 'center' : columnItem.align " :label="columnItem.label" :prop="columnItem.prop"
:sortable="columnItem.sortable == undefined ? false : columnItem.sortable"
:width="getWidth(columnItem.width)"
v-for="columnItem in item.columns">
<template #default="scope">
<slot :column="columnItem" :prop="columnItem.prop" :row="scope.row">
<div v-if="typeof(columnItem.click) == 'function' && typeof(columnItem.render) == 'function'">
<span @click="columnItem.click(scope.row)" style="cursor: pointer"
v-html="columnItem.render(scope.row)"></span>
</div>
<div v-else-if="typeof(columnItem.click) == 'function'">
<span @click="columnItem.click(scope.row)" style="cursor: pointer"> {{scope.row[columnItem.prop]}}</span>
</div>
<div v-else-if="typeof(columnItem.render) == 'function'">
<span v-html="columnItem.render(scope.row)">{{scope.row[columnItem.prop]}}</span>
</div>
<span v-else>
<el-tooltip placement="top">
<template #content>
<div v-html="getTextContent(scope.row[columnItem.prop])">
</div>
</template>
<div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
{{scope.row[columnItem.prop]}}
</div>
</el-tooltip>
</span>
</slot>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="操作" v-if="showTools && columns.length > 0" width="80">
<el-table-column v-if="showTools && columns.length > 0" fixed="right" label="操作" :width="toolsWith" align="center">
<template #default="scope">
<slot :scope="scope" name="tools"></slot>
<slot name="tools" :scope="scope" ></slot>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style='text-align: left;background-color: white' v-if="showPage">
<el-pagination
@size-change="handleSizeChange"
@prev-click="prePage"
@next-click="nextPage"
@current-change="handleCurrentChange"
:current-page="currentPage"
:layout="layout"
:page-size="pageSize"
:page-sizes="pageSizes"
:total="total"
@current-change="handleCurrentChange"
@next-click="nextPage"
@prev-click="prePage"
@size-change="handleSizeChange">
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</div>
... ...
... ... @@ -36,7 +36,7 @@ export default {
// 分页页码设置
pageSizes: {
type: Array,
default: [10, 50, 100, 200, 300, 400]
default: [10,50,100, 200, 300, 400]
},
// 默认展示
pageSize: {
... ... @@ -67,46 +67,50 @@ export default {
default: []
},
// 是否展示加载
loading: {
loading:{
type: Boolean,
default: false
},
maxWidth: {
maxWidth:{
type: Number,
default: window.innerWidth
},
showTools: {
showTools:{
type: Boolean,
default: false
},
toolsWith:{
type: Number,
default: 80
},
// medium / small / mini
size: {
size:{
type: String,
default: 'small'
},
multipleSelection: {
type: Array,
default: []
multipleSelection:{
type:Array,
default:[]
},
//展开行
showExpand: {
showExpand:{
type: Boolean,
default: false
},
//行数据的key
getRowKeys: {
getRowKeys:{
type: String,
default: 'id'
},
//默认展开哪行
expands: {
expands:{
type: Array,
default: []
},
//是否默认展开所有行
defaultExpand: {
type: Boolean,
default: false
defaultExpand:{
type:Boolean,
default:false
}
},
data() {
... ... @@ -125,22 +129,22 @@ export default {
* 时间：2021/11/16 16:19
*/
let getWidth = (width) => {
let maxWidth = (function () {
let getWidth = (width) =>{
let maxWidth = (function (){
let cols = props.columns;
if (cols && cols.length > 0) {
if(cols && cols.length > 0){
// 求和
let w = 0;
cols.forEach(function (v) {
w += parseFloat(v.width);
w += parseFloat(v.width) ;
})
let max = props.maxWidth;
if (props.showTools) {
if(props.showTools){
max -= 80;
}
if (w < max) {
if(w < max){
return max / w * width;
}
}
... ... @@ -151,7 +155,7 @@ export default {
}
let callback = () => {
let callback = () =>{
let params = {
page: currentPage.value, limit: pageSize.value
}
... ... @@ -183,7 +187,7 @@ export default {
let prePage = (val) => {
// console.log(`当前页: ${val}`)
// props.currentPage = val - 1;
currentPage.value = val - 1;
currentPage.value = val-1;
callback();
}
... ... @@ -191,7 +195,7 @@ export default {
let nextPage = (val) => {
// console.log(`当前页: ${val}`)
// props.currentPage = val + 1;
currentPage.value = val + 1;
currentPage.value = val+1;
callback();
}
... ... @@ -201,13 +205,13 @@ export default {
// });
//全选事件
let handleSelectionChange = (val) => {
let handleSelectionChange=(val)=>{
// multipleSelection.value = val
emit('selectionChange', val)
}
//设置默认选中
let toggleSelection = (rows) => {
let toggleSelection=(rows)=> {
//console.log("rows",rows)
proxy.$nextTick(function () {
//console.log("set",props.dataList,props.multipleSelection)
... ... @@ -223,18 +227,18 @@ export default {
})
}
let getTextContent = (val) => {
if (val && val != '' && val != null) {
val = val + ''.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{50}\x01?/g, "$&<br/>").replace(/\x01/g, "");
let getTextContent = (val) =>{
if(val && val != '' && val != null){
val = val+''.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{50}\x01?/g,"$&<br/>").replace(/\x01/g,"");
}
return val;
return `<pre>${val}</pre>`;
}
//设置父节点选中后children也选中
let setChecked = (row) => {
let arr = [];
if (row.children) {
row.children.map(j => {
let setChecked=(row)=>{
let arr=[];
if(row.children){
row.children.map(j=>{
arr.push(j)
setChecked(j)
})
... ... @@ -242,43 +246,67 @@ export default {
toggleSelection(arr)
}
//勾选数据行的Checkbox事件
let handleSelect = (selection, row) => {
let handleSelect=(selection, row)=>{
/* if(selection.some(el=>{ return row[props.getRowKeys] ===el[props.getRowKeys]})){
setChecked(row);
}else{
setChecked(row);
}*/
setChecked(row);
emit('handleSelect', selection)
emit('handleSelect',selection)
}
//勾选全选checkbox事件
let handleSelectAll = (selection) => {
const isSelect = selection.some(el => {
const tableDataIds = props.dataList.map(j => j[props.getRowKeys])
let handleSelectAll=(selection)=>{
const isSelect=selection.some(el=>{
const tableDataIds=props.dataList.map(j=>j[props.getRowKeys])
return tableDataIds.includes(el.id)
})
const isCancel = !props.dataList.every(el => {
const selectIds = selection.map(j => j[props.getRowKeys])
const isCancel=!props.dataList.every(el=>{
const selectIds=selection.map(j=>j[props.getRowKeys])
return selectIds.includes(el.id)
})
if (isSelect) {
if(isSelect){
setChecked(selection);
}
if (isCancel) {
props.dataList.map(el => {
if(isCancel){
props.dataList.map(el=>{
setChecked(el);
})
}
emit('handleSelectAll', selection)
emit('handleSelectAll',selection)
}
/**
* 表格组件，超过2行展示tooltip
* @param e
* @param item
*/
const tableColMouseenter = (e, item) => {
const ev = e.target;
var height = $(ev).scroll().height()
// 超过2行 46
if (height > 45) {
// 实际高度 > 可视高度 文字溢出
item.isShowTooltip = true;
} else {
// 否则为不溢出
item.isShowTooltip = false;
}
}
// 挂载完
Vue.onMounted(() => {
//callback();
})
Vue.watch(() => props.dataList, (newValue, oldValue) => {
setTimeout(function () {
if (props.showSelection) {
toggleSelection(props.multipleSelection)
}
}, 100)
Vue.watch(()=>props.dataList,(newValue, oldValue)=>{
setTimeout(function (){
if(props.showSelection){
toggleSelection(props.multipleSelection)
}
},100)
})
... ... @@ -296,7 +324,8 @@ export default {
prePage,
nextPage,
getWidth,
getTextContent
getTextContent,
tableColMouseenter
}
}
}
... ...