级联选择器懒加载
data() {
const that = this
return {
props: {
label: 'name',
value: 'phid',
lazy: true,
checkStrictly: true,
lazyLoad(node, resolve) {
if (node.level === 0) {
setTimeout(() => {
const str = 'ucenter/orgNew/findFirstOrg/' + that.userId
that.$http.get(str, { uuId: new Date().getTime() })
.then(res => {
if (res.status) {
res.data.map(item => {
return {
...item,
leaf: item.levels >= 2
}
})
resolve(res.data)
} else {
self.$message.error(res.message)
}
})
.catch(err => {
console.log(err)
self.$message.error(err.message)
})
}, 0)
} else {
setTimeout(() => {
const params = {
phid: node.data.phid,
uuId: new Date().getTime()
}
that.$http.get('ucenter/orgNew/findSonByPhId', params)
.then(response => {
if (response.status) {
response.data.map(item => {
return {
...item,
leaf: item.levels >= 2
}
})
resolve(response.data)
} else {
self.$message.error(response.message)
}
})
}, 0)
}
}
}
}
}
tab栏
<div v-for="(item, index) in tablist" :key="index">
<div :class="{ formTypeSelect: item.isSelect }" @click="tab(index)">
{{ item.name }}
</div>
</div>
tablist: [
{ name: '1', isSelect: true },
// { name: '2', isSelect: false },
{ name: '附件', isSelect: false }
],
// tab切换
tab(index) {
this.tablist.forEach((item, index) => {
item.isSelect = false
})
this.tablist[index].isSelect = true
},
el-date-picker 日期禁用
<el-date-picker v-model="value1" type="date" placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
data (){
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e6 //如-8.64e7就是不可以选择今天的
}
},
}
}
elementui 合计行合并单元格
watch: {
tableData: {
immediate: true,
async handler() {
await this.$nextTick() // 根据实际选择延迟调用
const tds = document.querySelectorAll('.el-table__footer-wrapper tr>td')
tds[0].colSpan = 2
tds[0].style.textAlign = 'center'
tds[1].style.display = 'none'
tds[2].style.textAlign = 'center'
tds[3].style.textAlign = 'center'
console.log(tds, 'tds')
}
}
}
利用spanMethods合并重名列
(1)将重复的列index存为数组
getOrderNumber() {
this.OrderIndexArr = []
const OrderObj = {}
this.tableData.forEach((element, index) => {
if (OrderObj[element.planType]) {
OrderObj[element.planType].push(index)
} else {
OrderObj[element.planType] = []
OrderObj[element.planType].push(index)
}
})
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）planIndexArr
for (const k in OrderObj) {
if (OrderObj[k].length > 0) {
this.OrderIndexArr.push(OrderObj[k])
}
}
console.log(OrderObj, 'OrderObj')
console.log(this.OrderIndexArr, 'OrderIndexArr')
}
(2)对要合并的行通过重复的数组长度合并
if (columnIndex === 2) { // spanMethods
for (let i = 0; i < this.OrderIndexArr.length; i++) {
const element = this.OrderIndexArr[i]
for (let j = 0; j < element.length; j++) {
const item = element[j]
// console.log(rowIndex, item)
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
}
} else if (j !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
方法二：
// 合并
// spanArr: []
// pos: 0
getSpanArr(data) { // 传入表数据
this.spanArr = []
for (let i = 0; i < data.length; i++) {
if (i === 0) { // 第一个
this.spanArr.push(1)
this.pos = 0
} else if (data[i].name === data[i - 1].name) { // 比较（更改为要合并列的字段）
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else { // 无合并项
this.spanArr.push(1)
this.pos = i // 记录位置
}
}
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 2) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
隐藏的图片查看器el-image-viewer
方法一
<template>
<div>
<el-button @click="onPreview">预览</el-button>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
</div>
</template>
<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
name: 'Index',
components: { ElImageViewer },
data() {
return {
showViewer: false, // 显示查看器
url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
},
methods: {
onPreview() {
this.showViewer = true
},
// 关闭查看器
closeViewer() {
this.showViewer = false
}
}
</script>
方法二
<template>
<div>
<el-button @click="onPreview">预览</el-button>
<!-- 图片查看器(兼容ie) -->
<el-image
ref="preview"
class="hideImgDiv"
:src="url"
:preview-src-list="[url]"
z-index="9999"
></el-image>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
},
methods: {
onPreview() {
//调用image组件中的大图浏览图片方法
this.$refs.preview.clickHandler();
// this.$refs.myImg.showViewer = true // 也可使用 showViewer 属性
},
}
</script>
css
/*隐藏el-image图片组件中不需要展示的的img标签*/
.hideImgDiv {
/deep/ .el-image__inner {
display: none;
}
}
el-table 长列表分段加载
directives: {
loadmore: {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
// 判断是否到底,scrollTop为已滚动到元素上边界的像素数，scrollHeight为元素完整的高度，clientHeight为内容的可见宽度
if (scrollDistance <= 10) {
binding.value()
}
})
}
}
},
methods: {
loadmore() { // v-loadmore="loadmore"
this.loadNum++
console.log('loadMore', this.loadNum)
this.tableData = [...this.tableData, ...this.listEach(this.loadNum)]
},
listEach(Num) {
const NumStart = ((Num - 1) * 5) + 6
const NumEnd = (Num * 5) + 6
const TableDataEach = this.listArray.slice(NumStart, NumEnd)
return TableDataEach
}
}
/*
请求到数据后先存一份，tableData先展示部分
this.listArray = data.records || []
this.loadNum = 0
this.tableData = this.listArray.slice(0, 6)
*/
网友评论