element-ui _bug

最新推荐文章于 2026-03-07 14:39:41 发布

原创最新推荐文章于 2026-03-07 14:39:41 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

高级框架专栏收录该内容

6 篇文章

订阅专栏

本文介绍了 Element UI 中一些实用的技巧，包括表格图片预览、下载图片文件、管理系统锚点设置、el-select中获取多个数值等。这些技巧能够帮助开发者更好地使用 Element UI，提升前端项目的用户体验。

图片预览

<el-table-column
  prop="picture"
  header-align="center"
  align="center"
  width="150px"
  label="图片">
  <template slot-scope="scope">
   <el-popover
    placement="right"
    title=""
    trigger="hover">
    <img :src="scope.row.picture"/>
    <img slot="reference" :src="scope.row.picture" :alt="scope.row.picture" style="max-height: 50px;max-width: 130px">
   </el-popover>
  </template>
</el-table-column>

点击按钮进行下载图片文件

  let img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = item.route;
  img.onload = function() {
      let cvs = document.createElement("canvas");
      let ctx = cvs.getContext('2d');
      cvs.width = img.width;
      cvs.height = img.height;
      ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
      let dataurl = cvs.toDataURL('image/jpeg', 1);
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      let obj = new Blob([u8arr], {
          type: mime
      });

      let aTag = document.createElement('a');
      let blob1 = new Blob([obj]);　　 // 这个content是下载的文件内容，自己修改
      aTag.download = item.name;　　　　　　 // 下载的文件名
      aTag.href = URL.createObjectURL(blob1);
      aTag.click();　　　　　　　　　　　　　　
      URL.revokeObjectURL(blob1);
  }

window.location = item.route;

管理系统锚点设置 ref="viewBox"

<template>
<div class="" ref="viewBox" style="height:390px;overflow:scroll;" v-loading.fullscreen.lock="loading" element-loading-text="Loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-location-outline"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item><a @click="jump_memberList">会员管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>会员详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="handle-box">
            <div class="item"> <!-- 会员信息 -->
            </div>
            <div class="item"><!-- 计时卡 -->
            </div>
            <div class="item"><!-- 次卡 -->
            </div>
            <p class="navigator"> <!-- 右侧导航 -->
                <el-select v-model="select_navigator_result" placeholder="导航" @change="goItem">
                    <el-option v-for="(item,index) in navigator_list" :key="index" :label="item.name" :value="index">
                    </el-option>
                </el-select>
            </p>
        </div>
    </div>
</div>
</div>
</template>
<script>
export default {
    name: 'basecharts',
    data() {},
    mounted() {
        let _this = this;
           this.$refs.viewBox.addEventListener('scroll', function() {
               console.log(_this.$refs.viewBox.scrollTop)
           });
    },
    components: {},
    methods: {
        goItem(index) {
            let _this = this;
            let jump = document.querySelectorAll('.item');
            let total = ""; // 获取需要滚动的距离
            if (index == 0) {
                total = jump[index].offsetTop - 135;
            } else {
                total = jump[index].offsetTop - 135 + 56;
            }
            this.$refs.viewBox.scrollTop = total;
        }
    }
}
</script>

<style scoped>
.navigator {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 40%;
    width: 40px;
}
.navigator .item {
    color: white;
    font-size: 24px;
}
</style>

el-select中获取多个数值

element-ui change方法中参数只有一个，就是选中的值（即value），如果你希望key也获取到的话，
以下两个方法参考下：
1.将grade_code和id使用特殊字符链接，如"--"，然后赋值到value中，选中之后再将这两个split分别取出，
是麻烦了一点，但能达到目的。
2.在choose方法中拿到value之后到options数组中进行比对各元素，如果value==item.grade_code，
返回item.id，也就是key值
choose: function(value) {
    let choosenItem = this.options.filter(item => item.grade_code === value)[0];
    // choosenItem 中有你需要的所有信息
}

el-date-picker 回显

给v-model new Date(2018-01-02)

table 嵌套 el-switch

 <el-switch
    style="display:inline-block;position:relative;top:-2px;"
    v-model="scope.row.private_valid"
    :active-value="1"
    :inactive-value="0"
    @change="change_authorize(scope.row,1)"
   >
   </el-switch>

table和switch相组合

<el-table
    :data="csData"
    tooltip-effect="dark"
    border
    stripe
    style="width: 100%">
    <el-table-column type="index" label="序号" align="center" width=""></el-table-column>
    <el-table-column prop="name" label="名称" header-align="center" align="right"></el-table-column>
    <el-table-column label="操作" align="center" width="">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.on"
          on-color="#00A854"
          on-text="启动"
          on-value="1"
          off-color="#F04134"
          off-text="禁止"
          off-value="0"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
</el-table>

el-date-picker 默认值 v-demo 一级目录

打包问题

img src=”../../static/img/tp02.jpg” 找得到 
background url 找不到url

select 回显失败

1.加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。

要保证select下拉的ID和v-model里边的id保持一致。

2._this.form_add_member.select_store_result=parseInt(_this.$route.query.customer_site_id);

注意这里的parseInt

table 表头错位无法对齐

el-table-column fixed="right" 每一个添加这个属性  全部左对齐或者右对齐
 <el-table   :data="list_ary" border  width="100%;">
    <el-table-column fixed="right" prop="name" label="姓名" ></el-table-column>
    <el-table-column fixed="right" prop="username" label="用户名" ></el-table-column>
    <el-table-column fixed="right" prop="site_name" label="门店" ></el-table-column>
    <el-table-column fixed="right" prop="staff_role_name" label="职位" ></el-table-column>
    <el-table-column fixed="right" prop="phone" label="电话" ></el-table-column>
    <el-table-column fixed="right" prop="remark" label="备注"  ></el-table-column>

    <el-table-column fixed="right" prop="address" label="操作" width="220">
        <template slot-scope="scope">
							<el-button size="small" type="primary"  @click="alt_item(scope.row)" >修改</el-button>
							<el-button size="small" type="danger" @click="del_item(scope.row,3)">删除</el-button>
          <el-button size="small" type="info"  @click="del_item(scope.row,2)" >禁用</el-button>
						</template>
    </el-table-column>
</el-table>

checkbox

<el-checkbox-group v-model="alt_staff_form.choice_course_teach">
	<el-checkbox v-for="(item,index) in courseList"
 :key="index" :label="item.id">{{item.course_name}}</el-checkbox>
</el-checkbox-group>

select hover背景颜色修改

.el-select-dropdown__item.hover,.el-select-dropdown__item:hover

node_modules/element-ui/lib/theme-chalk/index.css

CheckBox组件的change回调如何在使用自定义传参的条件下保留默认传参

做不到
解决办法：
<el-checkbox-group v-model="choice_course_teach">
<el-checkbox v-for="(item,index) in courseList" :key="index" :label="item.course_name" 
@change="change_choice_course_teach(item)"></el-checkbox>
</el-checkbox-group>
//el-checkbox 将item 发送的onchange里面  ;将item中的id放进对应的id数组;
//每次点击先去查看数组中是否有该id,有则点击过相当于传false，反之true
change_choice_course_teach(item) { 
    console.log(item);
    if (this.course_id_ary.indexOf(item.id) == -1) { //数组中没有这个值
        this.course_id_ary.push(item.id); //将门店的id放进门店id数组
    } else {
        this.course_id_ary.splice(this.course_id_ary.indexOf(item.id), 1);
    }
    console.log(this.course_id_ary);
},

修改element 模块样式

style 不要加scope;复制原来的样式  在其类前面增加一个类，要不就全局了

<template>
<div class="stoneNew"></div>
</template>

<style >
.stoneNew .el-upload-list__item {
     width: 300px;
    display: inline-block;
    margin-right: 10px;
}
</style >

三元表达式，变量绑定

:class="spacial_sale ? 'ctn_sale' : 'ctn_others'"

:src="[spacial_sale ? item.image : item.imgurl]" 

{{spacial_sale ? item.promotionlist[0].name : item.discount}}

 <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span>

form表单多次提交

<el-form ref="form" :model="form" label-width="80px" @submit.prevent="submit">

form表单文件上传（参数格式）The current request is not a multipart request

var formData = new FormData();
  formData.append("entryName", this.ruleForm.username);
  formData.append("pwd",md5(this.ruleForm.password));
	this.$http({
		url: '',
		method: 'post',
		data: formData,
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
	}).then((res) => {
		console.log(res);
		
	})

form表单提交文件element-ui

<el-form-item label="上传封面图	">
      <el-upload ref="add_cover" class="handle-input" name="picFile" action="" :file-list="cover_upload_files" list-type="picture" :auto-upload="false" :on-change="add_cover_change" :on-remove="del_cover" :on-preview="cover_pre">
          <el-button size="small" type="primary">点击上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
  </el-form-item>

  add_cover_change(file, fileList) { //封面 增加
      this.cover_upload_files.length = 0;
      this.cover_upload_files.push(file);
      console.log("增加封面");
      console.log(this.cover_upload_files);
  },
  del_cover(file, fileList) { //封面 删除
      this.cover_upload_files.length = 0;
  },

  onSubmit(val) {
      var _this = this;
      // var formData = new FormData(document.forms.namedItem("up_form"));
      // document.forms.namedItem("up_form") 这种方法不能上传多个文件，以最后点击的文件上传
      //所以用下面的for循环 来吧每一个文件都放进到 formData中 picFile为后台接口关键字
      var formData = new FormData();
      //封皮
      for (var i = 0; i < this.cover_upload_files.length; i++) {
          formData.append("picFile", _this.cover_upload_files[i].raw);
      }

      formData.append("name", _this.form.name);
      formData.append("weight", String(_this.form.net_weight));

      this.show_progress = true;
      this.$http({
          url: '/gem/addGem',
          method: 'post',
          data: formData,
          onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
            console.log(progressEvent);
            if(progressEvent.lengthComputable){
                //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                 _this.progress_value = parseInt(progressEvent.loaded / progressEvent.total * 100) ;
            }
          },
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      }).then((res) => {
          console.log(res);
      })
}

模拟双向绑定

<input type="text" id="my_input"/>
<span id="my_span"></span>
<script type="text/javascript">
    var obj = {
        asd:"asdf"
    };
    //输入完数据自动触发 set方法
    Object.defineProperty(obj,"User_Name",{
        get:function(val){
            console.log("get");
            console.log(val)
        },
        set:function(val){
            console.log("set");
            console.log(val);
            document.getElementById("my_span").innerHTML = val;
        }
    });

    document.getElementById("my_input").
    addEventListener("keyup",function(e){
        obj.User_Name = e.target.value;
    })