【Vue】Element开发笔记

Element开发笔记

前言

官网 https://element.eleme.cn/#/zh-CN/component/upload

其它项目网站

https://www.cnblogs.com/qq2806933146xiaobai/p/17180878.html

表格

序号列添加

handleIndexCalc是计算分页中的ID，否则序号不准确。

// 自动计算分页 Id
handleIndexCalc(index) {
    return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
    )
},

选择列添加

注意：同时拥有 序号列、选择列，序号必须在 选择列前面

表格高度统一，防止数据量少时，页脚上升

表格设置height属性，根据浏览器界面大小自动计算高度，留页脚面板高度。

<el-table ref="dataResult"
          v-loading="loading"
          :data="dataResult.dataSource"
          :height="tableHeight"
          :default-sort="{ prop: queryParams.orderby, order: queryParams.sort }"
          row-key="id"
          stripe
          border
          style="width: 100%;height=250"
          @sort-change="handleSortable">

Data：

// 表格高度
tableHeight: window.innerHeight - 280,

项目实例：

Select选择器

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
auto-complete	下个主版本弃用	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	-	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false

项目实例

 // 搜索框-文档状态
 statusOptions: [],
          
 // 创建时 
 created() {
    getOption('SYSTEM_STATUS').then((response) => {
      this.statusOptions = response.data
    }),
    this.getList()
  },
      
 // 选择文档状态（搜索框）
 handleSelectSearchStatus(e) {
      this.queryParams.queryStatus = e
 },

el-select 使用 multiple多选属性时，数据定义必须符合规范，并且返回的是 字符串数组，一开始需要定义好，否则数据无法显示。

    // 控件绑定的
    keyWordsList: [],
        
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.reset()
      this.postForm = { ...row }
      this.keyWordsList =  row.keyWords.split(',') //数据库取出来是字符串，转数组
      this.bOpenForm = true
      this.title = '编辑文档'
    },

dialog弹出框

需要注意浅拷贝 和 深拷贝 问题，row是Object对象类型，如果直接赋值，就变成了 浅拷贝，相当于我们的引用传递。

//方法一
this.form = JSON.parse(JSON.stringify(row));
//方法二
this.form = {...row}

/** 新增按钮操作 */
handleCreate() {
    this.reset()
    this.open = true
    this.title = '添加关键字'
},
/** 修改按钮操作 */
handleUpdate(row) {
  this.reset()
  this.form = { ...row }
  this.open = true
  this.title = '修改关键字'
},

每次窗体打开，并不会清除上一次验证规则，需要手动调用clearValidate()方法清除，与C#一样。

  watch: {
    // 打开弹窗，清空上一次验证规则
    bOpenForm: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.$refs['postForm'].clearValidate()
          })
        }
      },
    },
  },

el-upload上传组件

:action是执行上传动作的后台接口，el-button是触发上传的按钮。

multiple 设置是否可以同时选中多个文件上传

accept 设置限制上传文件的格式

<el-upload 
    :action="uploadActionUrl"
    accept="image/jpeg,image/gif,image/png"
    :before-upload="onBeforeUpload"
    multiple
    :limit="3"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传el-button>
    <div slot="tip" class="el-upload__tip">请上传图片格式文件div>
el-upload>
...
    onBeforeUpload(file)
    {
      const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isIMAGE && isLt1M;
    }

属性

参数	说明dd	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

项目实例

这里使用了，父组件向子组件传参，子组件向父组件传参。

父组件传参数

      // 上传附件
      fileActionUrl: CONFIG_URL.PUBLIC_CONFIG.baseURL + '/api/doc/UpLoadFile',
      fileAccept: '.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf',
      filelimit: 1,
      filelistType: 'file',
      filetips: '只能上传办公文档，其它类型建议不要上传',

子组件接收参数，在props中定义

  // 接收父组件传递的值
  props: {
    // 动作action
    actionUrl: {
      type: String,
      required: true,
      default: '/api/doc/UpLoadFile'
    },
    // 接受上传的文件类型
    accept: {
      type: String,
      required: true
    },
    // 最大允许上传个数
    uploadlimit: {
      type: Number,
      required: true,
      default: 1
    },

    /** 文件列表的类型
     * drag是否启用拖拽上传
     * list-type 可选值 text/picture/picture-card
     **/
    listType: {
      type: String,
      required: true,
      default: 'text'
    },
    // 上传提示语
    tips: {
      type: String,
      required: false
    }
  },

子组件向父组件回传数据

      // $emit() 向外触发父组件中方法,fileList由父组件传递过来
      this.$emit("fileList", this.ret_fileList)

父组件接收子组件回传的数据，需要在watch监听器中实现，能够感知数据变化。

  watch: {
    // 监听文件列表变化
    fileList: {
      handler() {
        this.$emit('fileList', this.ret_fileList)
      }
    }
  },

子组件代码