回首3月做過的功能以及遇到的問題點，話不多說，上程式碼瞅瞅~~

1. el-table + vue 實現 table 拖拽

效果圖如下：

功能描述：
   點選table表中的行資料，然後用滑鼠就可以實現拖拽效果

具體實現：
   // html
   <el-table
   row-key="tableNumber" // 設定table表中的唯一標識
   :row-class-name="tableRowClassName"  // 這個是設定表中某行資料的背景顏色
   >
     <el-table-column label="序號">
        <template slot-scope="scope">{{scope.$index + 1}}</template>
     </el-table-column>
     <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
        </template>
     </el-table-column>
     <el-table-column prop="age" label="年齡">
        <template slot-scope="scope">
            <el-input v-model="scope.row.age"></el-input>
        </template>
     </el-table-column>
     <el-table-column prop="phone" label="手機號">
        <template slot-scope="scope">
            <el-input v-model="scope.row.phone" maxlength="11"></el-input>
        </template>
     </el-table-column>
     <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button type="text" @click="deleteRow(scope.$index)">刪除</el-button>
            <el-button type="text" @click="addRow">新增</el-button>
        </template>
     </el-table-column>
   </el-table>

   // js
   <script>
      import Sortable from 'sortablejs'; // 這步很重要哈，要用這個拖拽功能需要npm這個喲
      export default {
        name: 'demo',
        data(){
          return {
            tableData: [],
            count: 0
          }
        },
        mounted(){
          this.dropRow();//一進入介面就需要呼叫拖拽方法就可以了
          this.count = this.tableData.length; // 初始化，如果是請求了介面，tableData進行了賦值操作的話，那麼也需要給count進行重新賦值！
        },
        methods: {
          // 這裡設定table表格，高亮行背景顏色
          tableRowClassName({row, rowIndex}){
            if(row.xx==='xxx'){
               return 'highlight-color';
            }
            return '';
          },
          addRow(){
            this.tableData.push({
              name:'',
              age:'',
              phone:'',
              tableNumber: this.count+=1
            })
          },
          deleteRow(index){
             this.tableData.splice(index,1);
          },
          // 這裡是 行拖拽 方法
          dropRow(){
             const tbody = document.querySelector('.el_table__body-wrapper tbody');
             const _this = this;
             Sortable.create(tbody,{
               onEnd({ newIndex, oldIndex }){
                  const currRow = _this.tableData.splice(oldIndex,1)[0];
                  _this.tableData.splice(newIndex, 0, currRow)
               }
             })
          }
        }
      }
   </script>
 
 

 順便還說一下關於 el-time-select 這個元件的小用法：
 類似效果：

 <el-form>
   <el-form-item label="開始時間" required>
      // picker-options: 這裡是甚至 固定時間範圍供使用者選擇，從0點開始，以1逐步遞增，23點結束，開始時間的最大值要小於結束時間，結束時間的最小值要大於開始時間
      <el-time-select v-model="timeObj.start" placeholder="請選擇開始時間" :picker-options="{start:'00:00', step:'01:00', end:'23:00', maxTime: timeObj.end}"></el-time-select>
   </el-form-item>
   <el-form-item label="結束時間" required>
      <el-time-select v-model="timeObj.end" placeholder="請選擇結束時間" :pick-options="{start:'00:00', step:'01:00', end:'23:00', minTime: timeObj.start}"></el-time-select>
   </el-form-item>
 </el-form>
 

 2.  tooltip 文字提示用法

3.  自定義confirm提示內容

methods: {
  handTips(){
    const h = this.$createElement;
    this.$confirm('',{
      distinguishCancelAndClose: true,
      confirmButtonText: 'YES',
      cancelButtonText: 'CANCEL',
      type: 'success',
      customClass: 'xxxx', // 這裡可以自定義className
      message:h('div', null, [
        h('div', null, '這裡是第一行文字內容'),
        h('div', { style: 'margin-top: 20px' }, '這裡是第二行文字內容')
      ])
    })
    .then(()=>{})
    .catch(()=>{})
  }

}
效果如下：【還需要寫css樣式哈,設定一下圖示的大小以及定位位置即可】
 

4.  上傳圖片

上傳圖片：
<el-upload
class="upload-content"
action="上傳圖片介面地址"
multiple
:show-file-list="false"
:headers="headers"
:data="uploadData"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:limit="1"
:file-list="fileList"
:on-exceed="handleExceed"
>
 <el-button>上傳圖片</el-button>
 <span>
  <el-tooltip effect="dark" content="一次只能上傳一張" placement="top">
     <i class=""el-icon-question></i>
  </el-tooltip>
 </span>
</el-upload>
<script>
export default{
  name:'upload',
  data(){
    return {
      headers:{
        token:'xx',
      },
      uploadData:{
        fileExtension:'',
        accessType:'',
        needReviewUrl: true,
      },
      fileList:[]
    }
  },
  methods:{
    handleBeforeUpload(file){
      const lastPoint = file.name.lastIndexOf('.');
      this.uploadData.fileExtension = file.name.slice(lastPoint+1);
      return true;
    },
    handleSuccess(response){
      this.fileList = [];
      const { reviewUrl } = response.data[0];
      // 這裡可以獲取到上傳成功的圖片了，然後可以進行圖片回顯或者請求ocr介面識別圖片
    },
    handleError(err){
      this.fileList = [];
    },
    // 上傳圖片最大張數限制
    handleExceed(files){
      if(files.length > 1) {
         this.$message.error('一次只能上傳一張圖片')
      }
    },
  }
}
</script>

 5. 通過a標籤下載pdf檔案

當後端小哥返回一個pdf檔案的url地址，前端需要點選這個url把pdf檔案下載下來的操作

<el-button type="text" @click="handleDownloadPdf">下載pdf檔案</el-button>

methods:{
  handleDownloadPdf(){
     const pdfUrl = 'xxxx';// 假設這個是pdf檔案的url地址
     const fileName = 'xxx.pdf';//假設這個是pdf下載後的檔名字
     const xhr = new XMLHttpRequest();
     xhr.open('GET', pdfUrl, true);
     xhr.responseType = 'blob';
     xhr.onload = ()=>{
       const blob = xhr.response;
       const link = document.createElement('a');
       link.download = fileName;
       link.href = URL.createObjectURL(blob);
       document.body.appendChild(link);
       link.click();
       document.body.appendRemove(link);
     }
     xhr.send();
  }
}

6. el-tree 許可權樹結構可以進行 過濾資料

效果如下：

<div class="tree-container">
  <el-input v-model="filterText" placeholder="請輸入關鍵字進行過濾"></el-input>
  <el-tree
  ref="tree"
  v-loading="treeLoading"
  :data="dataTree"
  :props="defaultProps"
  highlightCurrent
  :check-strictly="false"
  default-expand-all
  node-key="id"
  :filter-node-method="filterNode"
  @node-click="nodeClick"
  >
  </el-tree>
</div>
<script>
export default {
  name:'tree',
  data(){
    return {
      dataTree:[],
      defaultProps:{
        children:'children',
        label:'name'
      },
      filterText: '',
      treeLoading: false,
      nodeClickData: null,//被選中的節點
    }
  },
  watch:{
    filterText(val){
      this.$refs.tree.filter(val);
    }
  },
  methods:{
    nodeClick(data){
      this.nodeClickData = data;
    },
    filterNode(value, data){
      if(!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
}
</script>

 7. table複選框設定禁用狀態以及表頭設定紅色星號

<el-table 
ref="table"
:data="tableData"
border
:header-cell-class-name="setHeaderCellClassName"
@selection-change="selectionChange"
  <el-table-column type="selection" :selectable="selectable"></el-table-column>
  <el-table-column type="index" label="序號"></el-table-column>
  <el-table-column label="姓名"></el-table-column>
</el-table>
<script>
export default {
  name:'table',
  data(){
    return {
      tableData:[]
    }
  },
  methods:{
    // 設定table表格複選框是否禁用
    selectable(row){
      const arrs = ['aa','bb'];//這裡放用來判斷的條件
      const {status} = row;
      if(arrs.includes(status)){
        return false;
      }
      return true;
    },
    // 給table表格設定表頭
    setHeaderCellClassName(obj){
      const columnIndex = [2,3,4,5,6,7,8...]; // 這裡是根據table表裡面的列index值作為判斷條件來處理的，也可以換其他條件哈，根據業務需求來即可。
      if(columnIndex.includes(obj.columnIndex)){
        return 'class類名';
      }
      return '';
    }
  }
}
</script>