vue+element列表中每一项使用一次el-upload后,单独删除该项的数据时,列表中所有的el-upload的图片被清空

el-upload组件代码:


<template>

  <el-upload
    class="avatar-uploader"
    :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}"
    :action="uploadUrl"
    :file-list="fileList"
    :ref="refUpload"
    name="file"
    list-type="picture-card"
    :on-change="handleChange"
    :on-remove="handleRemove">
    <div class="avatar-uploader-center">
      <i class="el-icon-plus avatar-uploader-icon"></i>

      <div class="el-upload__tip" v-show="text">{{text}}</div>
    </div>

  </el-upload>

</template> 

<script>

import Config from '@/common/js/config';

/**
 * @param imageUrl : [{url:''}]
 * @param imageCount : 上传数量
 * @param text
 * @returns arr
 */

export default {
  name: 'uploadImg',

  props: ['imageUrl', 'imageCount', 'text' , 'size','refUpload'],

  data() {
    return {
      uploadUrl:'',
      fileList:[],
    };
  },

  created() {
    this.uploadUrl = Config.uploadUrl;
    if(this.imageUrl == '' || this.imageUrl == undefined || this.imageUrl == null){
      this.fileList = [];
    }
    if(this.imageUrl && this.imageUrl.length > 0){
      if(this.imageUrl[0].url == '' || this.imageUrl[0].url == null || this.imageUrl[0].url == undefined){
        this.fileList = [];
      }else {
        this.fileList = this.imageUrl;
      }
    }

  },

  methods: {
    imgRemove(){
      console.log(this.$refs);
      this.$refs[this.refUpload].clearFiles();
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
    },

    beforeAvatarUpload(file) {

      const isJPEG = file.type === 'image/jpeg';
      const isJPG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024  < 512;

      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过512k!');
      }
       return (isJPG || isJPEG || isPNG || isGIF) && isLt2M;
    },


    // 返回图片在服务器的URL
    getUploadImage(){
      let imgUrl;
      this.fileList.map(item => {
        if(item.response){
          imgUrl = item.response.data;
        }else {
          imgUrl = item.url;
        }
      });
      return imgUrl;
    },


  }

}

</script>

<style>

  .avatar-uploader .el-upload {
    line-height: inherit;
  }

  .avatar-uploader .el-icon-close-tip{
    opacity: 0;
  }

  .avatar-uploader .el-upload,
  .avatar-uploader .el-upload-list__item{
    width: 100px !important;;
    height: 100px !important;;
  }

  .avatarUploaderMimi .el-upload,
  .avatarUploaderMimi .el-upload-list__item{
    width: 50px !important;;
    height: 50px !important;;
  }


  .avatar-uploader.disabled .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

</style>


父组件调用代码

<div class="input-wrap" v-for="(item,index) in skuList" :key="RndNum(8)">
                  <upload-img ref="skuImgList" :ref-upload="'refUpload' + RndNum(4)" :image-count="uploadCount" size="mini" class="sku-img"></upload-img>

<div class="input-wrap">
<span style="color: blue;cursor: pointer;" @click="removeSku(item,index)">删除</span>
</div>
</div>


script=============
removeSku(item, index) {
        this.$refs.skuImgList[index].imgRemove();
        this.skuList.splice(index, 1);
      },

删除前===========================

删除前

删除后============================

删除后

我尝试过给子组件加v-if显示隐藏,不行,也尝试过把el-upload拿出来直接用然后把列表内每一项加一个fileList来使用也不行,实在是搞不懂了。
求大神指教!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue+element列表中每一项使用一次el-upload后,单独删除该项的数据时,列表中所有的el-upload的图片被清空

# el-upload组件代码: ``` <template> <el-upload class="avatar-uploader" :class="{avatarUploaderMimi:size == 'mini', disabled:fileList.length >= (imageCount?imageCount:1)}" :action="uploadUrl" :file-list="fileList" :ref="refUpload" name="file" list-type="picture-card" :on-change="handleChange" :on-remove="handleRemove"> <div class="avatar-uploader-center"> <i class="el-icon-plus avatar-uploader-icon"></i> <div class="el-upload__tip" v-show="text">{{text}}</div> </div> </el-upload> </template>  <script> import Config from '@/common/js/config'; /** * @param imageUrl : [{url:''}] * @param imageCount : 上传数量 * @param text * @returns arr */ export default { name: 'uploadImg', props: ['imageUrl', 'imageCount', 'text' , 'size','refUpload'], data() { return { uploadUrl:'', fileList:[], }; }, created() { this.uploadUrl = Config.uploadUrl; if(this.imageUrl == '' || this.imageUrl == undefined || this.imageUrl == null){ this.fileList = []; } if(this.imageUrl && this.imageUrl.length > 0){ if(this.imageUrl[0].url == '' || this.imageUrl[0].url == null || this.imageUrl[0].url == undefined){ this.fileList = []; }else { this.fileList = this.imageUrl; } } }, methods: { imgRemove(){ console.log(this.$refs); this.$refs[this.refUpload].clearFiles(); }, handleChange(file, fileList) { this.fileList = fileList; }, handleRemove(file, fileList) { this.fileList = fileList; }, beforeAvatarUpload(file) { const isJPEG = file.type === 'image/jpeg'; const isJPG = file.type === 'image/jpg'; const isPNG = file.type === 'image/png'; const isGIF = file.type === 'image/gif'; const isLt2M = file.size / 1024 < 512; if (!isLt2M) { this.$message.error('上传图片大小不能超过512k!'); } return (isJPG || isJPEG || isPNG || isGIF) && isLt2M; }, // 返回图片在服务器的URL getUploadImage(){ let imgUrl; this.fileList.map(item => { if(item.response){ imgUrl = item.response.data; }else { imgUrl = item.url; } }); return imgUrl; }, } } </script> <style> .avatar-uploader .el-upload { line-height: inherit; } .avatar-uploader .el-icon-close-tip{ opacity: 0; } .avatar-uploader .el-upload, .avatar-uploader .el-upload-list__item{ width: 100px !important;; height: 100px !important;; } .avatarUploaderMimi .el-upload, .avatarUploaderMimi .el-upload-list__item{ width: 50px !important;; height: 50px !important;; } .avatar-uploader.disabled .el-upload--picture-card { display: none; } .avatar-uploader-center{ display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } </style> ``` # 父组件调用代码 ``` <div class="input-wrap" v-for="(item,index) in skuList" :key="RndNum(8)"> <upload-img ref="skuImgList" :ref-upload="'refUpload' + RndNum(4)" :image-count="uploadCount" size="mini" class="sku-img"></upload-img> <div class="input-wrap"> <span style="color: blue;cursor: pointer;" @click="removeSku(item,index)">删除</span> </div> </div> script============= removeSku(item, index) { this.$refs.skuImgList[index].imgRemove(); this.skuList.splice(index, 1); }, ``` # 删除前=========================== ![删除前](https://img-ask.csdn.net/upload/201812/12/1544592841_873819.png) # 删除后============================ ![删除后](https://img-ask.csdn.net/upload/201812/12/1544592892_314881.png) 我尝试过给子组件加v-if显示隐藏,不行,也尝试过把el-upload拿出来直接用然后把列表内每一项加一个fileList来使用也不行,实在是搞不懂了。 求大神指教!

vue ElementUI 使用el-upload为什么先发了一个option

网上查了是因为复杂http的原因,但是我经过抓包觉得他是符合简单的要求的, ![图片说明](https://img-ask.csdn.net/upload/202003/29/1585491390_815634.png) 代码如下,响应事件都是log输出 ```html <el-upload class="happy" action="http://localhost:8000" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="10" :on-exceed="handleExceed" :file-list="fileList" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">上传文件数量不超过10,且不超过5M.</div> </el-upload> ``` 求解,是什么参数没设置对吗?希望能给个方向

el-upload中的file-list由后端返回,但是在IE下不显示文件列表,在Chrome中就显示

文件列表由后端返回,在create钩子函数中将后端返回的列表数据加入到file-list中,在Chrome下可以显示文件列表,但是IE中就不显示

el-dialog 只获取el-table中的最后一行

```html <el-table-column fixed="left" align="center" label="操作" width="100" v-if="!isPreview"> <template slot-scope="scope"> {{scope.$index+1}} <el-tooltip class="item" effect="dark" content="编辑" placement="top"> <el-button type="text" class="el-icon-edit" @click.self="editDialogVisible = true"> <el-dialog title="编辑" :visible.sync="editDialogVisible" :modal-append-to-body='false' center> {{scope.$index+1}} <el-form :model="scope.row" label-suffix=":" label-width="100px"> <el-form-item prop="planName" label=款项> <el-input v-model="scope.row.planName" size="small" :disabled="isPreview"></el-input> </el-form-item> </el-form> </el-dialog> </el-button> </el-tooltip> <el-tooltip class="item" effect="dark" content="删除" placement="top"> <el-button type="text" class="el-icon-delete" @click.self="delDialogVisible = true"> <el-dialog title="删除" :visible.sync="delDialogVisible" center :modal-append-to-body='false'> </el-dialog> </el-button> </el-tooltip> </template> </el-table-column> ``` ![图片说明](https://img-ask.csdn.net/upload/201906/05/1559717510_260620.png) 第一个位置是获取到1的 但是点进去编辑就获取了最后一行 dialog里index就变成5了 ![图片说明](https://img-ask.csdn.net/upload/201906/05/1559717615_803374.png) 求大佬解答,哪里有问题???? 后续 我按照大佬的方法修改了click的处理 ``` @click.self="showEditDialog(scope.row) ``` 结果是我想要的 ,但还是 有个问题,我选中第一个,显示dialog后 遮罩层下面的提示自动跑到最后 一个去了,如图,求解 ![图片说明](https://img-ask.csdn.net/upload/201906/05/1559721542_325598.png)

vue中使用element-ui,使用路由功能时报错。

``` <script> import $ from "jquery"; import router from "vue-router"; export default { name:'app', router, components:{}, mounted(){ $(".navLeft").height($(window).height()-50); } }; </script> ``` 上面是App.vue中的js代码。 ``` <el-menu :router="true" background-color="#F5F5F5" class="el-menu-vertical-demo" default-active="1"> <el-submenu index="/user"> <template slot="title"> <i class="el-icon-user"/> <span>用户管理</span> </template> <el-menu-item-group> <el-menu-item index="/user/findAll"><i class="el-icon-setting"/>查看用户信息</el-menu-item> <el-menu-item index="/user/addUser"><i class="el-icon-setting"/>添加用户信息</el-menu-item> <el-menu-item index="/user/modifyUser"><i class="el-icon-setting"/>修改用户信息</el-menu-item> <el-menu-item index="/user/deleteUser"><i class="el-icon-setting"/>删除用户信息</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> ``` 上面是html模板,使用的是导航栏,想在导航栏中使用路由功能,但是在点击导航菜单的时候提示“element-ui.common.js”的3376行报错。 ![图片说明](https://img-ask.csdn.net/upload/202001/12/1578821090_812757.png) 请问这个该怎么解决? 网上找了好多,都不是这种的。

element 中 el-date-picker组件时差问题

按照官网和其他教程,我添加了“value-format="yyyy-MM-dd HH:mm:ss"”属性,可是依然是有8小时的时差 ``` <el-date-picker class="date-picker" v-model="time" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getUserList"> </el-date-picker> ``` ![图片说明](https://img-ask.csdn.net/upload/202004/29/1588124288_254276.jpg) 如果把“value-format="yyyy-MM-dd HH:mm:ss"改成“value-format="yyyy-MM-dd"”的话是没有时差问题,但是我现在需要设置时分秒。 另外网上查到的从数据转化后直接加减对应时间我这边也不能用,连续搜索会一直减时间

关于el-table无法渲染的问题,求大佬指教

* 从ElementUI的官网新建了VUE组件,使用这段代码 ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } </script> ``` * * * * * * * * * * * * * * * * * * router里的index文件 ``` import Vue from 'vue' import Router from 'vue-router' import NewFile from '@/components/NewFile' Vue.use(Router) export default new Router({ routes: [ { path: '/NewFile', components: { newfile: NewFile, } } ] }) ``` src下的App.vue和Main.js文件 ``` <template> <div class="container" id="vueApp"> <router-view name="newfile"></router-view> </div> </template> <script> export default { } </script> <style> </style> ``` ``` import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import Table from 'element-ui'; import App from './App' import router from './router' import store from './store' import 'babel-polyfill' Vue.config.productionTip = false Vue.use(ElementUI); Vue.use(Table); /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App), router, store, components: { App }, template: '<App/>' }) ``` package.json里的依赖: ``` "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "element-ui": "^2.13.0", "express": "^4.17.1", "mysql": "^2.17.1", "vue": "^2.5.2", "vue-axios": "^2.1.5", "vue-router": "^3.0.1", "vuex": "^3.1.2" } ``` 单独新建一个VUE项目可以运行,但是在原有这个项目运行无法渲染页面,并弹出以下问题,不知道有无相关 ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578300263_899632.png) ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578299380_894423.png) 另外elementUI的其他组件,比如el-form和el-dialog,做登录页时也是单独项目可渲染,但是在这个项目里无法渲染,但是也没有相关报错,求大佬指教

关于el-table-column绑定值的问题

我mock一个数据传过来绑定表格,传过来的data ``` data: Array(1) 0: aa: Array(1) bb: Array(1) ``` ``` aa: Array(1) 0: issuer: 1 name: "xxxcode" date: 1 ``` ``` bb: Array(1) 0: issuer: 1 name: "xxxsort" date: 1 ``` 把数据放到表格中 ``` <el-table :data="filTableData" > <el-table-column label="bb表格" > <template slot-scope="scope"> <div v-for="(item, index) in scope.row.aa" :key="index"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="名称" > {{ item.name }} </el-table-column> <el-table-column label="日期" > {{ item.date }} </el-table-column> <el-table-column label="发行商代码" > {{item.issuer}} </el-table-column> </div> </template> </el-table-column> </el-table> ``` 现在出现的效果是 ![图片说明](https://img-ask.csdn.net/upload/201910/12/1570840780_440893.png) 数据除了放到各自的prop外,还全部放到了第一个el-table-column label为bb表格中 我想要的效果是 ![图片说明](https://img-ask.csdn.net/upload/201910/12/1570841125_689708.png) 上面有一个label表头,没有值,请问如何设置

Vue2.0使用ElementUI的组件报错

问题截图: ![图片说明](https://img-ask.csdn.net/upload/201903/29/1553828313_461442.png) 问题描述: 编译工具webstorm,使用npm命令 dev运行项目报错。 搭建过程: 按照官方教程执行了 1.使用命令安装element组件 ``` npm i element-ui -S ``` 2.安装babel组件 ``` npm install babel-plugin-component -S ``` 3.main.js引用 ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); ``` 4.页面中使用element组件 ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> ``` .babelrc文件修改后报错,es2015,安装后无法使用,还原成系统默认配置。 以下为相关文件的具体内容: package.json ``` { "name": "vuetest3", "version": "1.0.0", "description": "A Vue.js project", "author": "811204266@qq.com <123456>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-component": "^1.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ``` 页面文件home.vue ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> <script> export default { name: 'home', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> </style> ``` main.js ``` // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` router/index.js ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/page/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] }) ```

elementUI中el-table-column中加入下拉菜单无效果

如图,这是el-table中的代码 ![图片说明](https://img-ask.csdn.net/upload/202002/11/1581411200_398876.jpg) 这是效果: ![图片说明](https://img-ask.csdn.net/upload/202002/11/1581411301_752702.jpg) 点击el-table里面的lie'biao'x没效果,而在el-table外的就可以。 ![图片说明](https://img-ask.csdn.net/upload/202002/11/1581411466_516361.jpg) 这是咋回事?

vue + elementui 中el-table-column 下的json显示问题

![图片说明](https://img-ask.csdn.net/upload/201907/30/1564466915_2724.png) ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564466823_14929.png) 各位大佬,怎么解析 {{scope.row.json}} 里面的json啊,不显示json字符串,解析后显示表单。

ie浏览器下,Element UI el-tabs el-table 卡顿;其他浏览器正常

(1)源码: ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578303487_406401.png) (2)运行效果: ![图片说明](https://img-ask.csdn.net/upload/202001/06/1578303501_526812.png) (3)说明: 1. 3个页签,每个页签220行数据,拖动滚动条,直接卡顿。 2. 仅限IE浏览器,其他浏览器正常。 3. 版本信息:vue2.6.11,element-2.11.1 IE11

element的组件el-tag内容显示不了

问题:我在使用el-tag动态修改增添标签的时候发现我直接启动浏览器进行访问可以显示内容,但是我要是通过启动服务器访问该页面则内容无法显示 这个无法访问 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585125097_705759.png) 直接访问代码,不启动服务器就可以访问: ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585125174_205833.png) 代码如下: ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585125252_983183.png)

el-table 点击checkbox 如何打开对应禁用按钮

``` <el-table ref="nRiskRateData" :data="nRiskRateData" tooltip-effect="dark" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="a" width="200" prop="riskSorted" align="center"> </el-table-column> <el-table-column label="c" width="200" prop="riskCode" align="center"> </el-table-column> <el-table-column label="b" width="200" prop="riskName" align="center"> </el-table-column> <el-table-column label="d" width="200" prop="rateTop" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.rateTop" :disabled="true"> <template slot="append">%</template> </el-input> </template> </el-table-column> </el-table> ``` ![图片说明](https://img-ask.csdn.net/upload/201805/11/1526033294_956794.png)

vue elementui el-table合计行打印问题

el-table打印时,合计行和数据重叠在一起,总是在固定高度的位置,怎么让他们分开怎么让他们分开 ![图片说明](https://img-ask.csdn.net/upload/201912/02/1575279623_421132.jpg)

ElementUI 中的Upload组件绑定的file-list不起作用的问题

1、需求是这样的: 上传图片,但是图片有大小限制,如果超出限定大小,给出提示即可。 2、现有问题: 提示是可以给出的,超出大小限制后图片也没有上传到后台,但是在前台的list列表中却展现了出来。 打印了默认的fileList和绑定的值,一个是有值的,一个是没有值。 所以,是不是file-list绑定的这个值根本不起作用? 如果我不想展示不合大小的图片的名称,应该怎么做? 3、 页面代码: ![图片说明](https://img-ask.csdn.net/upload/201907/17/1563334401_171136.png) JS代码: ![图片说明](https://img-ask.csdn.net/upload/201907/17/1563334423_748717.png) 页面效果和打印结果: ![图片说明](https://img-ask.csdn.net/upload/201907/17/1563334457_73091.png)

element-ui中的menu菜单改为动态v-for循环生成后选中状态失效问题

问题如图中显示,选中一个菜单项,其他菜单项没有取消选中状态 ``` <el-menu default-active='0' v-for="(menuItemName, menuItemIndex) in menuItemNames" :key="menuItemIndex"> <el-menu-item index="menuItemIndex"> <i class="el-icon-menu"></i> <span slot="title" @click="addTab(menuItemName, menuItemIndex)">{{menuItemName}}</span> </el-menu-item> </el-menu> ``` ![图片说明](https://img-ask.csdn.net/upload/201911/25/1574667220_393678.png)

vue+element 怎么实现表格的每行的某一列能点击?

**如下图,想要点击姓名这一列的每行的这个,要怎么实现啊?** ![图片说明](https://img-ask.csdn.net/upload/201905/30/1559207754_658664.png) * * **由于element的标签是动态生成的,没办法给具体的click事件,烦** ![图片说明](https://img-ask.csdn.net/upload/201905/30/1559207761_687885.png)

elementUI标签页<el-tabs>不能及时渲染echarts图

# 问题 使用v-echarts和elementUI的标签页。 首次默认进入第一个标签页可以直接渲染,但是进入第二个标签页和第三个标签页不能及时渲染,都需要缩放一下页面才能渲染出来,控制台也没有任何错误,这是怎么回事? ![图片说明](https://img-ask.csdn.net/upload/202003/29/1585458892_997049.gif) # 代码 代码已经被简化,但问题依然存在。 ``` <template> <div> <el-card class="el-card"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <!--======标签页1====三个标签页内容是同样的数据====--> <el-tab-pane label="标签页1" name="one"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> <!--==========标签页2=======--> <el-tab-pane label="标签页2" name="two"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> <!--=========标签页3==============--> <el-tab-pane label="标签页3" name="three"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> </el-tabs> </el-card> </div> </template> <script> export default { name: "IncomeStatistics", data() { return { activeName: 'one', //当前激活的标签页 chartData: { columns: ['日期', '访问用户'], rows: [ {'日期': '1/1', '访问用户': 1393}, {'日期': '1/2', '访问用户': 3530}, {'日期': '1/3', '访问用户': 2923}, {'日期': '1/4', '访问用户': 1723}, {'日期': '1/5', '访问用户': 3792}, {'日期': '1/6', '访问用户': 4593} ] }, }; }, methods: { //切换标签页时触发 handleClick(tab, event) { this.activeName = tab.name; }, } } </script> <style scoped> </style> ```

Vue el-amap 调用高德地图绘画多边形

小白求帮助!!! ![图片说明](https://img-ask.csdn.net/upload/201908/12/1565618371_945696.png)![图片说明](https://img-ask.csdn.net/upload/201908/12/1565618381_228152.png)![图片说明](https://img-ask.csdn.net/upload/201908/12/1565618382_45268.png)![图片说明](https://img-ask.csdn.net/upload/201908/12/1565618390_672950.png) <template> <div class="mymap"> <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo"> <el-amap-marker vid="amapDemo" :position="center"></el-amap-marker> </el-amap> </div> </template> <style> .mod-home { line-height: 1.5; } .grid-content{ grid-column-gap: 10px; } .col-height{ height: 450px; } .mymap{ width: 1000px; height: 800px; } </style> <script> import News from './news' import Expire from './expire' import ExpireShow from './expireshow' import AMap from 'vue-amap' let amapManager = new AMap.AMapManager() export default { data () { return { loading: true, cycle: '', amapManager, zoom: 12, center: [121, 31], events: { init: o => { console.log(o.getCenter()) // console.log(this.$refs.map.$$getInstance()); o.getCity(result => { console.log(result) }) }, moveend: () => {}, zoomchange: () => {}, click: e => { this.drawPolygon() } }, plugin: [ 'ToolBar', 'mouseTool', { pName: 'MapType', defaultType: 0, events: { init (o) { console.log(o) }, } } ] } }, // 高德地图 mounted () { // 加载地图和相关组件 // this.loadmap() }, // inject: ['reload'], components: { News, Expire, ExpireShow }, activated () { }, methods: { drawPolygon () { mouseTool.polygon({ strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, // 线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 // strokeDasharray: [30,10], }) } } } </script>

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

Linux 会成为主流桌面操作系统吗?

整理 |屠敏出品 | CSDN(ID:CSDNnews)2020 年 1 月 14 日,微软正式停止了 Windows 7 系统的扩展支持,这意味着服役十年的 Windows 7,属于...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

学习总结之HTML5剑指前端(建议收藏,图文并茂)

前言学习《HTML5与CSS3权威指南》这本书很不错,学完之后我颇有感触,觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。这本书主要学习HTML5和css3,看...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

记一次腾讯面试,我挂在了最熟悉不过的队列上……

腾讯后台面试,面试官问:如何自己实现队列?

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

冒泡排序动画(基于python pygame实现)

本项目效果初始截图如下 动画见本人b站投稿:https://www.bilibili.com/video/av95491382 本项目对应github地址:https://github.com/BigShuang python版本:3.6,pygame版本:1.9.3。(python版本一致应该就没什么问题) 样例gif如下 ======================= 大爽歌作,mad

Redis核心原理与应用实践

Redis核心原理与应用实践 在很多场景下都会使用Redis,但是到了深层次的时候就了解的不是那么深刻,以至于在面试的时候经常会遇到卡壳的现象,学习知识要做到系统和深入,不要把Redis想象的过于复杂,和Mysql一样,是个读取数据的软件。 有一个理解是Redis是key value缓存服务器,更多的优点在于对value的操作更加丰富。 安装 yum install redis #yum安装 b...

现代的 “Hello, World”,可不仅仅是几行代码而已

作者 |Charles R. Martin译者 | 弯月,责编 | 夕颜头图 |付费下载自视觉中国出品 | CSDN(ID:CSDNnews)新手...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

!大部分程序员只会写3年代码

如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

程序员毕业去大公司好还是小公司好?

虽然大公司并不是人人都能进,但我仍建议还未毕业的同学,尽力地通过校招向大公司挤,但凡挤进去,你这一生会容易很多。 大公司哪里好?没能进大公司怎么办?答案都在这里了,记得帮我点赞哦。 目录: 技术氛围 内部晋升与跳槽 啥也没学会,公司倒闭了? 不同的人脉圈,注定会有不同的结果 没能去大厂怎么办? 一、技术氛围 纵观整个程序员技术领域,哪个在行业有所名气的大牛,不是在大厂? 而且众所...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

立即提问
相关内容推荐