Vue+elementui爬坑之旅

最新推荐文章于 2025-05-09 13:56:32 发布

原创最新推荐文章于 2025-05-09 13:56:32 发布 · 764 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文记录了作者在使用Vue.js与ElementUI框架时遇到的问题及解决方案，包括v-show的异常、样式调整、弹窗层级问题、select标签获取label值的难点，以及Vue生命周期的理解与应用。此外，还提到了前端分页的实现和数据处理的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我有一种蜜汁预感，我会掉入vue的所有坑，所以赶忙今天过来写个记录贴，争取爬遍vue的所有坑
1-vue和elementsui一起用的时候，v-show会不好用。
2-使用elementsui时，样式不好改，如果只是单纯改变大小，建议使用size = “small”
3-当写dialog的时候，dialog可能是一个组件，所以导致弹窗被遮盖层覆盖，虽然可以通过z-index改变这个问题，但是当弹窗里又多一个弹窗的时候，仍然需要再次改变，不好维护。
解决方法：在dialog里添加:append-to-body=“true”，使弹窗从body出发，如下：

<el-dialog title="改变状态" 
    :visible.sync="dialogVisible" 
    @close="$emit('update:show', false )" 
    :show="show"
    :append-to-body="true"
    width="30%">

select问题

我需要获取select的label值而不是value值，使用ref无法实现
解决方法：
select：

<el-select  v-model="dialogForm.state_name"  @change="GetStatusLabel"  clearable placeholder="请选择状态">
              <el-option
              v-for="item in Interview.state_name"
              :key="item.value"
              :label="item.label"
              :value="item.value"> 
              </el-option>
            </el-select>

使用ele的change方法，相当于得到index然后去遍历interview.state_name，匹配上即可得到，

GetStatusLabel(value) {
      let obj = {};
      obj = this.Interview.state_name.find(item => {
        return item.value === value;
      });
      this.returnStatus.label = obj.label;
    }

5-vue的生命周期非常重要，文档里的生命周期的图一定要理解并记忆
还有就是对于ajax获得的数据进行处理时，尽量在获取成功之后的{}里面写，别问我为什么，这个问题我竟然调了半个小时，我一定是傻了。。。。

使用vue +elementui写的前端分页

<template>
<div style="height:85%">
      <el-col :span="3">
        <el-input 
        v-model="position_name" 
        size="small" 
        clearable  
        filterable
        prefix-icon 
        placeholder="请输入所搜职位">
        </el-input>
      </el-col>   
    <div class="scheduleTable">

      <el-table :data="positionTableEnd" border height="90%">
        <el-table-column 
        prop="position_id"
        v-if="false"
        label="ID" 
        align="center" >
        </el-table-column>

        <el-table-column 
        prop="position_name" 
        label="职位名称" 
        align="center" >
        </el-table-column>

        <el-table-column 
        prop="is_test" 
        label="是否做题" 
        align="center" 
        :formatter="formatRole">
        </el-table-column>

         <el-table-column 
        prop="status" 
        label="是否启用" 
        align="center"
        :formatter="formatStatus" >
        </el-table-column>

        <el-table-column
        prop="resume"
        label="笔试题"
        width="300px"
        align="center">
        <template slot-scope="scope">
          <span class="StatusStyle"></span>
        </template>
        </el-table-column>

        <el-table-column 
        fixed="right" 
        label="操作" 
        align="center"
        width="250px">
          <template slot-scope="scope">
            <el-button @click="handlePositionEdit(scope.row,scope.$index)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改组件 -->
      <editposition  :show.sync="positionShow" :positionrow="positionrow" @addPoiEvent="addPoiEvent"></editposition>
      <el-pagination 
      background 
      align="right" 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="currentPage" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="pagesize" 
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
      </el-pagination>
    </div>
</div>
</template>

<script>
import { getPositionInfo } from "../../../api/ajaxs.js";
import editposition from "./editPosition.vue";
export default {
  data() {
    return {
      position_name: "",
      pagesize: 10,
      totalCount: 0,
      currentPage: 1,
      positionTable: [],
      positionrow: [],
      positionShow: false,
      positionTableEnd: [],
      filterTableDataEnd: [],
      flag: false
    };
  },
  components: {
    editposition
  },
  mounted() {
    let getPositionInfos = getPositionInfo();
    getPositionInfos.then(data => {
      this.positionTable = data.list; //用户列表
      this.totalCount = data.total;
      //对数据进行处理，开始分页
      this.totalCount = this.positionTable.length;
      if (this.totalCount > this.pagesize) {
        for (let index = 0; index < this.pagesize; index++) {
          this.positionTableEnd.push(this.positionTable[index]);
        }
      } else {
        this.positionTableEnd = this.positionTable;
      }
    });
  },
  watch: {
    position_name: function() {
      this.positionTableEnd = [];
      this.filterTableDataEnd = [];
      this.positionTable.forEach((value, index) => {
        if (value.position_name) {
          if (value.position_name.indexOf(this.position_name) >= 0) {
            this.filterTableDataEnd.push(value);
          }
        }
      });
      //页面数据改变重新统计分页
      this.currentPage = 1;
      this.totalCount = this.filterTableDataEnd.length;
      //渲染表格
      this.currentChangePage(this.filterTableDataEnd);
      //页面初始化数据判断是否检索过
      this.flag = true;
    }
  },
  methods: {
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pagesize;
      let to = this.pagesize * this.currentPage;
      this.positionTableEnd = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.positionTableEnd.push(list[from]);
        }
      }
    },
    handleSizeChange(val) {
      console.log("每页" + val + "条");
      this.pagesize = val;
      this.handleCurrentChange(this.currentPage);
    },
    handleCurrentChange(val) {
      console.log("当前页" + val + "页");
      this.currentPage = val;
      //判断是否进行了检索
      if (!this.flag) {
        this.currentChangePage(this.positionTable);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
      }
    },
    handlePositionEdit(row, index) {
      this.positionrow = row;
      this.positionrow.index = index;
      this.positionShow = true;
    },
    formatRole(row, column) {
      return row.is_test === "1"
        ? "否"
        : row.is_test === "0" ? "是" : row.is_test;
    },
    formatStatus(row,colum){
      return row.status === "1"
        ? "CLOSE"
        : row.status === "0" ? "OPEN" : row.is_test;
    },
    addPoiEvent(data) {
      this.handleCurrentChange(this.currentPage);
    }
  }
};
</script>
<style lang="stylus">
</style>

样子：
这里写图片描述

一个过滤

   //过滤字符串，将16进制颜色转变为rgb格式
    // regColor(code) {
    //   var x = code.replace(/#[0-9A-Fa-f]{3,6}/g, function(match) {
    //      match = match.toLowerCase();
    //     if (match.length === 4) {
    //       var colorNew = "#";
    //       for (var i = 1; i < 4; i += 1) {
    //         colorNew += match.slice(i, i + 1).concat(match.slice(i, i + 1));
    //       }
    //       match = colorNew;
    //     }
    //     var colorChange = [];
    //     for (var i = 1; i < 7; i += 2) {
    //       colorChange.push(parseInt("0x" + match.slice(i, i + 2)));
    //     }
    //     return "rgb(" + colorChange.join(",") + ")";
    //   });
    //   x = x.replace(/[&"?]/g, function(match) {
    //     return '\\'+match
    //   })
    //   x = x.replace(/[<>]/g, function(match) {
    //     if(match == '<'){
    //       return '\\' + '&lt';
    //     }else{
    //        return '\\' + '&gt';
    //     }
    //   })
    //   return x;
    // }