• input改造文件上传，el-table的改造，点击上传，拖拽上传，多选上传

    第一个input标签效果

    第二个input标签的效果

    el-table的改造效果

    1. <template>
    2.   <div class="outerBox">
    3.     <div class="analyze" v-if="status">
    4.       <div class="unFile">
    5.         <div class="mainBox">
    6.           // <img class="picture" src="../../static/images/upload.png" />
    7.           <div class="title">上传.log文件进行解析</div>
    8.           <div class="clickBtn">
    9.             <div class='notisfyWord'>上传内容</div>
    10.             <input
    11.             type="file"
    12.             id="fileInput"
    13.             @change="handleFileChange"
    14.             accept=".log"
    15.             style="width:100%;height:100%;cursor: pointer;opacity:0"
    16.           /></div>
    17.         </div>
    18.       </div>
    19.     </div>
    20.     <div class="fileBox" v-if="!status">
    21.       <div class="upload">
    22.         <div>上传.log文件进行解析
    23.           <input
    24.             type="file"
    25.             id="fileInput"
    26.             @change="handleFileChange"
    27.             accept=".log"
    28.             style="width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;top:0;left:0;"
    29.           />
    30.         </div>
    31.         <div class="fileName">{{ fileName }}</div>
    32.       </div>
    33.  
    34.       <div class="tableStyle">
    35.         <el-table
    36.           :data="tableData"
    37.           height="70vh"
    38.           style="width: 100%"
    39.           :header-row-style="{
    40.             color: 'white',
    41.           }"
    42.           :row-style="{
    43.             color: 'white',
    44.           }"
    45.           :cell-style="{
    46.             textAlign: 'center',
    47.             border: '1px solid #0a1641',
    48.           }"
    49.           :header-cell-style="{
    50.             textAlign: 'center',
    51.             background: '#222d54',
    52.             border: '1px solid #222d54',
    53.           }"
    54.           :row-class-name="tableRowClassName"
    55.           v-loading="loading"
    56.         >
    57.           <el-table-column prop="sourceTime" label="时间" width="180">
    58.           </el-table-column>
    59.           <el-table-column prop="item" label="事项" width="150">
    60.           </el-table-column>
    61.           <!-- <el-table-column prop="msg" label="描述"> </el-table-column> -->
    62.           <el-table-column prop="source" label="来源" width="100">
    63.           </el-table-column>
    64.           <el-table-column prop="subsystem" label="子系统"> </el-table-column>
    65.           <el-table-column prop="level" label="严重等级"> </el-table-column>
    66.           <el-table-column prop="value" label="值"> </el-table-column>
    67.         </el-table>
    68.         <!-- <el-pagination
    69.           class="pagination"
    70.           @size-change="handleSizeChange"
    71.           @current-change="handleCurrentChange"
    72.           :current-page.sync="currentPage1"
    73.           :page-size="100"
    74.           layout="total, prev, pager, next"
    75.           :total="1000"
    76.         >
    77.         </el-pagination> -->
    78.       </div>
    79.     </div>
    80.   </div>
    81. </template>
    82.  
    83. <script>
    84. export default {
    85.   data() {
    86.     return {
    87.       loading: true,
    88.       tableData: [],
    89.       fileName: "",
    90.       status: true,
    91.       tableTotal:'',
    92.       pageSize:100,
    93.       midTableData: [],
    94.       test:[
    95.         {item:'qqqqq',unusual:'1'},
    96.         {item:'qqqqq',unusual:'0'},
    97.         {item:'qqqqq',unusual:'0'},
    98.         {item:'qqqqq',unusual:'1'},
    99.       ]
    100.     };
    101.   },
    102.   mounted() {
    103.     this.tableRowClassName;
    104.   },
    105.   methods: {
    106.     clickBtn() {
    107.       document.getElementById("fileInput").click();
    108.     },
    109.     handleFileChange(event) {
    110.       const file = event.target.files[0];
    111.       const fileType = file.name.split('.').pop();
    112.       //if(fileType != 'log'){
    113.        // this.$message.error('请上传.log文件');
    114.        // return
    115.      // }
    116.      // if(file.size >  50 * 1024){
    117.      //   this.$message.error('最小上传文件大小为50k');
    118.       //  return
    119.      // }
    120.       this.fileName = file.name;
    121.       this.status = false;
    122.       // 模拟异步
    123.       setTimeout(()=>{
    124.         this.loading = false
    125.         this.tableData = this.test;
    126.       },2000)
    127.     },
    128.     tableRowClassName({ row, rowIndex }) {
    129.       if (row.unusual === '0') {
    130.         return "selected-row";
    131.       } else {
    132.         return "selected-rows";
    133.       }
    134.     },
    135.     handleCurrentChange(val) {
    136.       const start = val * 100
    137.       const end = (val + 1) * 100
    138.     },
    139.   },
    140. };
    141. </script>
    142.  
    143. <style scoped>
    144. ::v-deep .selected-row {
    145.   background-color: #e4d33d !important;
    146. }
    147. ::v-deep .selected-rows {
    148.   background-color: #0a1641 !important;
    149. }
    150. .outerBox {
    151.   background: linear-gradient(180deg, #eaf4ff 0%, #042f61 100%);
    152. }
    153. .analyze {
    154.   width: 100%;
    155.   height: 100%;
    156.   padding: 0 !important;
    157.   display: flex;
    158.   justify-content: center;
    159. }
    160.  
    161. .upload {
    162.   margin-top: 10px;
    163.   line-height: 40px;
    164.   display: flex;
    165.   justify-content: center;
    166.   align-items: center;
    167.   color: white;
    168.   font-size: 15px;
    169.   background-color: #045fcb;
    170.   border-radius: 7px;
    171.   margin-bottom: 10px;
    172.   position: relative;
    173.   cursor: pointer;
    174. }
    175.  
    176. .selected-row {
    177.   background-color: #e4d33d !important;
    178. }
    179.  
    180. .tableStyle {
    181.   width: 100%;
    182.   /* background-color: #094b97; */
    183. }
    184.  
    185. .el-button {
    186.   color: white !important;
    187.   background: linear-gradient(180deg, #82dde1 0%, #4bb8c0 100%) !important;
    188. }
    189.  
    190. .exportBtn {
    191.   position: absolute;
    192.   right: 10px;
    193.   bottom: 10px;
    194. }
    195.  
    196. .unFile {
    197.   width: 50%;
    198.   height: 40%;
    199.   display: flex;
    200.   justify-content: center;
    201.   align-items: center;
    202.   margin-top: 15%;
    203.   background-color: #094b97;
    204.   border-radius: 10px;
    205.   border: 3px dashed #d4e1f3;
    206.   overflow: hidden;
    207. }
    208.  
    209. .picture {
    210.   width: 150px;
    211. }
    212.  
    213. .mainBox {
    214.   display: flex;
    215.   flex-direction: column;
    216.   align-items: center;
    217. }
    218.  
    219. .title {
    220.   color: white;
    221.   font-size: 15px;
    222.   display: flex;
    223.   justify-content: center;
    224. }
    225.  
    226. .clickBtn {
    227.   overflow: hidden;
    228.   opacity:1;
    229.   color: white;
    230.   border-radius: 5px;
    231.   background-color: #2188ff;
    232.   width:150px;
    233.   height:50px;
    234.   font-size: 15px;
    235.   cursor: pointer;
    236.   position: relative;
    237. }
    238. .notisfyWord{
    239.   cursor: pointer;
    240.   position: absolute;
    241.   left:50%;
    242.   top:50%;
    243.   transform: translate(-50%,-50%);
    244. }
    245. .fileBox {
    246.   background-color: #0a1642;
    247.   padding: 10px;
    248. }
    249. .fileName {
    250.   margin-left: 10px;
    251. }
    252. .pagination {
    253.   display: flex;
    254.   justify-content: right;
    255. }
    256. ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    257.   color: black !important;
    258.   background-color: #0460cb !important;
    259. }
    260.  
    261. ::v-deep .el-table__empty-text {
    262.   color: white !important;
    263. }
    264. ::v-deep .el-table__body-wrapper {
    265.   background-color: #0a1641 !important;
    266. }
    267. ::v-deep .el-table::before {
    268.   background-color: #0a1642;
    269. }
    270. ::v-deep .el-table .el-table__cell.gutter {
    271.   background-color: #0a1642;
    272. }
    273. </style>
    274.

    3、input本身支持拖拽上传但要设置opcity为0,不能设置diaplay:none或者visiables

      如果不使用拖拽上传的话，只点击上传可使用如下

    1.           <div
    2.             class="clickBtn"
    3.             @click="clickBtn"
    4.           >
    5.             上传内容
    6.           </div>
    7.           <input
    8.             type="file"
    9.             id="fileInput"
    10.             @change="handleFileChange"
    11.             style="display: none"
    12.           />
    13.  
    14.     clickBtn(){
    15.       console.log("clickFackBtn");
    16.       document.getElementById('fileInput').click()
    17.     },
    18.  
    19.     handleFileChange(event) {
    20.       const file = event.target.files[0];
    21.       console.log(file);
    22.     },

    input同时也支持多选文件上传

    4、表格效果

    只设置一小框的样式

    1.       <el-table
    2.         :data="tableData"
    3.         height="calc(100vh - 230px)"
    4.         style="width: 100%"
    5.         :header-row-style="{}"
    6.         :row-style="{}"
    7.         :header-cell-style="{
    8.           textAlign: 'center',
    9.           color: 'white',
    10.         }"
    11.         v-loading="loading"
    12.         :cell-style="cellStyle"
    13.       >
    14.         <el-table-column prop="siteRange" label="站点名称" width="240">
    15.         </el-table-column>
    16.         <el-table-column prop="carName" label="车号"> </el-table-column>
    17.         <el-table-column prop="troubleType" label="告警类型" width="130">
    18.         </el-table-column>
    19.         <el-table-column prop="troubleLevel" label="严重等级">
    20.         </el-table-column>
    21.       </el-table>
    1.   methods: {
    2.     cellStyle({ row, column }) {
    3.       if (
    4.         column.property === "troubleLevel" &&
    5.         row.troubleLevel == "三级告警"
    6.       ) {
    7.         return {
    8.           color: "#F6BD16", // 设置字体颜色
    9.           textAlign: "center",
    10.         };
    11.       } else if (
    12.         column.property === "troubleLevel" &&
    13.         row.troubleLevel == "二级告警"
    14.       ) {
    15.         return {
    16.           color: "#FF9D4D",
    17.           textAlign: "center",
    18.         };
    19.       } else if (
    20.         column.property === "troubleLevel" &&
    21.         row.troubleLevel == "一级告警"
    22.       ) {
    23.         return {
    24.           color: "#F6BD16",
    25.           textAlign: "center",
    26.         };
    27.       } else {
    28.         return {
    29.           color: "white",
    30.           textAlign: "center",
    31.         };
    32.       }
    33.     },
    34.   },

  • 相关阅读:
    127.0.0.1 和 0.0.0.0 地址的区别
    Java实现在PDF中添加骑缝章
    【LINUX】 LINUX | 提取U盘映像
    【毕业设计】基于单片机的蓝牙相机设计与实现 - 物联网 单片机 嵌入式
    IDEA配置tomcat，快速部署tomcat
    高斯金字塔的秘密（二，加速高斯，c#实现）
    C++面试常见问题 — C++语言基础
    《TCP/IP网络编程》阅读笔记--getsockopt和setsockopt的使用
    apt-get 指令格式以及常用指令
    外贸在谷歌搜索客户，为什么搜索出来的都是同行？
  • 原文地址：https://blog.csdn.net/m0_47999208/article/details/134079482