第一個input標簽效果

第二個input標簽的效果

el-table的改造效果

<template>
  <div class="outerBox">
    <div class="analyze" v-if="status">
      <div class="unFile">
        <div class="mainBox">
          // <img class="picture" src="../../static/images/upload.png" />
          <div class="title">上傳.log文件進行解析</div>
          <div class="clickBtn">
            <div class='notisfyWord'>上傳內容</div>
            <input
            type="file"
            id="fileInput"
            @change="handleFileChange"
            accept=".log"
            style="width:100%;height:100%;cursor: pointer;opacity:0"
          /></div>
        </div>
      </div>
    </div>
    <div class="fileBox" v-if="!status">
      <div class="upload">
        <div>上傳.log文件進行解析
          <input
            type="file"
            id="fileInput"
            @change="handleFileChange"
            accept=".log"
            style="width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;top:0;left:0;"
          />
        </div>
        <div class="fileName">{{ fileName }}</div>
      </div>

      <div class="tableStyle">
        <el-table
          :data="tableData"
          height="70vh"
          style="width: 100%"
          :header-row-style="{
            color: 'white',
          }"
          :row-style="{
            color: 'white',
          }"
          :cell-style="{
            textAlign: 'center',
            border: '1px solid #0a1641',
          }"
          :header-cell-style="{
            textAlign: 'center',
            background: '#222d54',
            border: '1px solid #222d54',
          }"
          :row-class-name="tableRowClassName"
          v-loading="loading"
        >
          <el-table-column prop="sourceTime" label="時間" width="180">
          </el-table-column>
          <el-table-column prop="item" label="事項" width="150">
          </el-table-column>
          <!-- <el-table-column prop="msg" label="描述"> </el-table-column> -->
          <el-table-column prop="source" label="來源" width="100">
          </el-table-column>
          <el-table-column prop="subsystem" label="子系統"> </el-table-column>
          <el-table-column prop="level" label="嚴重等級"> </el-table-column>
          <el-table-column prop="value" label="值"> </el-table-column>
        </el-table>
        <!-- <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      fileName: "",
      status: true,
      tableTotal:'',
      pageSize:100,
      midTableData: [],
      test:[
        {item:'qqqqq',unusual:'1'},
        {item:'qqqqq',unusual:'0'},
        {item:'qqqqq',unusual:'0'},
        {item:'qqqqq',unusual:'1'},
      ]
    };
  },
  mounted() {
    this.tableRowClassName;
  },
  methods: {
    clickBtn() {
      document.getElementById("fileInput").click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      const fileType = file.name.split('.').pop();
      //if(fileType != 'log'){
       // this.$message.error('請上傳.log文件');
       // return
     // }
     // if(file.size >  50 * 1024){
     //   this.$message.error('最小上傳文件大小為50k');
      //  return
     // }
      this.fileName = file.name;
      this.status = false;
      // 模擬異步
      setTimeout(()=>{
        this.loading = false
        this.tableData = this.test;
      },2000)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.unusual === '0') {
        return "selected-row";
      } else {
        return "selected-rows";
      }
    },
    handleCurrentChange(val) {
      const start = val * 100
      const end = (val + 1) * 100
    },
  },
};
</script>

<style scoped>
::v-deep .selected-row {
  background-color: #e4d33d !important;
}
::v-deep .selected-rows {
  background-color: #0a1641 !important;
}
.outerBox {
  background: linear-gradient(180deg, #eaf4ff 0%, #042f61 100%);
}
.analyze {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: flex;
  justify-content: center;
}

.upload {
  margin-top: 10px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
  background-color: #045fcb;
  border-radius: 7px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}

.selected-row {
  background-color: #e4d33d !important;
}

.tableStyle {
  width: 100%;
  /* background-color: #094b97; */
}

.el-button {
  color: white !important;
  background: linear-gradient(180deg, #82dde1 0%, #4bb8c0 100%) !important;
}

.exportBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.unFile {
  width: 50%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15%;
  background-color: #094b97;
  border-radius: 10px;
  border: 3px dashed #d4e1f3;
  overflow: hidden;
}

.picture {
  width: 150px;
}

.mainBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: white;
  font-size: 15px;
  display: flex;
  justify-content: center;
}

.clickBtn {
  overflow: hidden;
  opacity:1;
  color: white;
  border-radius: 5px;
  background-color: #2188ff;
  width:150px;
  height:50px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
.notisfyWord{
  cursor: pointer;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.fileBox {
  background-color: #0a1642;
  padding: 10px;
}
.fileName {
  margin-left: 10px;
}
.pagination {
  display: flex;
  justify-content: right;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  color: black !important;
  background-color: #0460cb !important;
}

::v-deep .el-table__empty-text {
  color: white !important;
}
::v-deep .el-table__body-wrapper {
  background-color: #0a1641 !important;
}
::v-deep .el-table::before {
  background-color: #0a1642;
}
::v-deep .el-table .el-table__cell.gutter {
  background-color: #0a1642;
}
</style>

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

? 如果不使用拖拽上傳的話，只點擊上傳可使用如下

          <div
            class="clickBtn"
            @click="clickBtn"
          >
            上傳內容
          </div>
          <input
            type="file"
            id="fileInput"
            @change="handleFileChange"
            style="display: none"
          />

    clickBtn(){
      console.log("clickFackBtn");
      document.getElementById('fileInput').click()
    },

    handleFileChange(event) {
      const file = event.target.files[0];
      console.log(file);
    },

input同時也支持多選文件上傳<input mutilple/>

4、表格效果

只設置一小框的樣式文章來源地址http://www.zghlxwxcb.cn/news/detail-733762.html

      <el-table
        :data="tableData"
        height="calc(100vh - 230px)"
        style="width: 100%"
        :header-row-style="{}"
        :row-style="{}"
        :header-cell-style="{
          textAlign: 'center',
          color: 'white',
        }"
        v-loading="loading"
        :cell-style="cellStyle"
      >
        <el-table-column prop="siteRange" label="站點名稱" width="240">
        </el-table-column>
        <el-table-column prop="carName" label="車號"> </el-table-column>
        <el-table-column prop="troubleType" label="告警類型" width="130">
        </el-table-column>
        <el-table-column prop="troubleLevel" label="嚴重等級">
        </el-table-column>
      </el-table>

  methods: {
    cellStyle({ row, column }) {
      if (
        column.property === "troubleLevel" &&
        row.troubleLevel == "三級告警"
      ) {
        return {
          color: "#F6BD16", // 設置字體顏色
          textAlign: "center",
        };
      } else if (
        column.property === "troubleLevel" &&
        row.troubleLevel == "二級告警"
      ) {
        return {
          color: "#FF9D4D",
          textAlign: "center",
        };
      } else if (
        column.property === "troubleLevel" &&
        row.troubleLevel == "一級告警"
      ) {
        return {
          color: "#F6BD16",
          textAlign: "center",
        };
      } else {
        return {
          color: "white",
          textAlign: "center",
        };
      }
    },
  },

到了這里，關于input改造文件上傳，el-table的改造，點擊上傳，拖拽上傳，多選上傳的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！