|
...
|
...
|
@@ -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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
