element ui组件使用介绍

目录

el-table多选框，分页保留上页选中目标

el-table合并单元格

获取表格当前索引值

el-upload

---

• 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>