Vue Element UI

el-select 綁定對象值

el-tabel 序號

<el-table-column
        label="序號"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
        // page 當前頁 pageSize 頁面容量
    </template>
</el-table-column>

 // 最好在el-table加上v-loading 你懂得 序號能及時更新，防止請求數據滯後

在 Vue Element UI 中 el-tabel 導出excel

後端提供接口,前端傳遞參數導出

記得面向百度編程

// 導出Excel公用方法
import axios from "axios"

export function exportMethod(data) {
    axios({
        method: 'get',   // 這邊方法，參數傳遞 以個人實際項目爲準
        url: `${data.url}`,
        params:{ params: data.params}
        responseType: 'blob'
    }).then((res) => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
 
        // link.download = res.headers['content-disposition'] //下載後文件名
        link.download = data.fileName //下載的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
        console.log(error)
    })
}

<template>
	<el-button @click="exportExcel">導出表格</el-button>
</template>

import { exportMethod } from "../../utils/exportExcel"

    exportExcel(){
      let obj ={
        method:"get",
        url:`xxxxx`,
        params:xxxx,
        fileName: "xxxx.xls"
      }
      exportMethod(obj)
    },

DropDown組件使用時，子選項無法綁定事件的處理

    <el-dropdown-menu>
        <el-dropdown-item @click.native="clickEvent">點擊一下</el-dropdown-item>   // native 
    </el-dropdown-menu>

暫時先寫這麼多，後期再補充