目录
-
el-table多选框,分页保留上页选中目标
重点指定row-key,设置reserve-selection为true
<el-table
border
ref="multipleTable"
v-loading="tableLoading"
:data="tableData"
:row-key="你的数据内的唯一键值id等"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="50"
align="center"
reserve-selection
>
</el-table-column>
<el-table-column
v-for="col in cols"
:prop="col.prop"
:label="col.label"
:width="col.width"
align="center"
></el-table-column>
</el-table>
-
el-table合并单元格
重点指定row-key,设置reserve-selection为true
<template>
<el-table
border
ref="multipleTable"
v-loading="tableLoading"
:data="tableData"
:row-key="你的数据内的唯一键值id等"
:span-method="(...arg) => strategySpanMethod(...arg, data)"
>
<el-table-column
type="selection"
width="50"
align="center"
reserve-selection
>
</el-table-column>
<el-table-column
v-for="col in cols"
:prop="col.prop"
:label="col.label"
:width="col.width"
align="center"
></el-table-column>
</el-table>
</template>
<script setup>
import type { TableColumnCtx } from 'element-plus'
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: number
}
const strategySpanMethod = ({row, column, rowIndex, columnIndex} : SpanMethodProps, data:any) => {
let spanArr = getSpanArr(data,column.property)
const _row = spanArr[rowIndex]
const _col = _row > 0 ? 1: 0
if (column.property === 'name') {
return {
rowspan: _row ,
colspan: _col ,
}
}else{
return {
rowspan: 1,
colspan: 1,
}
}
}
// 处理合并行的数据
const getSpanArr = (data, spanKey)=> {
var spanArr = [];
var pos = "";
for (var i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1);
pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i][spanKey] === data[i - 1][spanKey]) {
spanArr[pos] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
pos = i;
}
}
}
return spanArr;
}
</script>
-
获取表格当前索引值
<el-table max-height="290" :data="userTableData" border style="width: 100%">
<el-table-column label="序号"><template slot-scope="scope">{
{scope.$index}}
</el-table-column>
</el-table>
-
el-upload
解决el-upload加上accept文件过滤,before-upload不调用的问题
只要在el-upload组件加上原生的drop事件即可解决上述问题
@drop.native="e => beforeUploadHandler(e.dataTransfer.files[0])"
<template>
<div class="upload-wrap">
<el-upload
action
accept=".png,.jpg,.jpeg"
msgPage
drag
:show-file-list="false"
:http-request="e => requestHandler(e)"
:before-upload="file => beforeUploadHandler(file, 512000, ['image/png', 'image/jpg', 'image/jpeg'])"
//该处加入原生drop事件,获取拖拽的文件
@drop.native="e => beforeUploadHandler(e.dataTransfer.files[0], 512000, ['image/png', 'image/jpg', 'image/jpeg'])"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传PNG,JPG,JPEG文件,且不超过500kb。</div>
</el-upload>
</div>
</template>
<script>
export default {
name: 'default',
data() {
return {
};
},
methods: {
//http-request: 覆盖默认的上传行为,自定义上传方法
requestHandler(e){
console.log(e);
},
//before-upload: 上传之前进行文件验证
beforeUploadHandler(file, size, accept){
console.log(file, size, accept);
//验证文件大小
if(file.size > size){
this.$message.info(`上传文件不能大于500kb`);
return false;
}
//验证文件类型
if(accept.indexOf(file.type) == -1){
this.$message.info(`只能上传${accept.join('、')}文件`);
return false;
}
return true;
}
}
};
</script>
<style lang="scss" scoped>
.upload-wrap{
margin-top: 30px;
text-align: center;
}
</style>