步步向前之Element-UI

Table

固定表头

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
例如：

<el-table
    :data="tableData3"
    height="250"
    border
    style="width: 100%">
...
</el-table>

这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的。
值得一提的是，height可以动态绑定，我的解决方案是给表格包一个父元素，并绑定一个值100%给height。

height:Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

点击事件

点击事件刚开始在这里陷入深坑了，拿行的点击事件来讲：
row-dblclick： 表格的某一行双击事件。首先是dblclick而不是dbclick!(不知为什么我vscode提示row-dbclick，醉了)，其次调用加@，然后默认参数通常用到最多的是row，不用在括号里写明，在方法里直接声明就可以用了；row-click同理。
例如：

<el-table ref="tabFavourite" 
style="width: 100%" :height="tabHeight" 
border 
@row-dblclick="goTimeseries" 
@row-click="toggle"> 
</el-table>
...
<script>
export default {
    ...
    methods: {
        toggle ({ fromName, symbol }) {
          this.fromName = fromName;
          this.symbol = symbol;
          this.$refs.tabFavourite.setCurrentRow();
          // (`fromName`,`symbol`是row的键)
        },
        goTimeseries (row) {
          console.log(...row） 
        },
    }
}
</script>

配合vue过滤器

主要使用自定义列，参数为 { row, column, $index }

<el-table-column 
prop="platform.rise" 
label="24小时涨幅" 
sortable  
align="center">
     <template slot-scope="scope"><span v-color="scope.row.platform.rise">{{ scope.row.platform.rise | percent(2) | sign(scope.row.platform.change) | nvl('--')}}</span></template>
</el-table-column>
//scope.row是当前列的值，prop其实可以不写

自定义表头

文档解释比较简单：

render-header	列标题 Label 区域渲染使用的 Function	Function(h, { column, $index })	—	—

实现效果：

鼠标移上去会有提示文字弹出，这里用el-tooltips。

• 无效方案：

     renderHeader (h, { column, $index }) {
       return h('el-tooltip', {
         props: {
           effect: 'light',
           content: '根据交易所24小时成交量占比和实时价格加权计算得到',
         }
       },[
         h('span', column.label),
         h('i', {
           class: 'icon-tips',
           }
         })
       ]);

  渲染结果是一个span包含了label文字，同时有名为el-tooltip的class，并无小图标，后边中括号结构里只能有一个（有待考证）。

• 可行方案：

     renderHeader (h, { column, $index }) {
       return [
         h('span', column.label),
         h(
           'el-tooltip',
           {
             props: {
               effect: 'light',
               content: (function () {
                 let label = column.label;
                 switch (label) {
                 case '加权最新价':
                   return '根据交易所24小时成交量占比和实时价格加权计算得到';
                   break;
                 case '偏移价':
                   return '交易所该币对当前最新价-加权价';
                   break;
                 }
               })(),
             }
           },
           [
             h('i', {
               class: 'icon-tips'
             })
           ]
         ),
         h('span', {
           class: {
             'el-icon-question': true
           }
         })
       ];
     },

  事实证明返回的这个数组，可以作为表头内真正的标签元素多个累加，最后一个span是我追加的，其实是多余的，参考ElementUI的Table组件中的renderHeader方法研究，作者研究很透彻，最后把span替换成p也能正常渲染，这是我最后一步尝试的，说明数组内的渲染机制，而h或createElement渲染函数第三个数组参数大于一个的结构均不能被渲染上，而且本标签无论如何都被渲染为span，郁闷。
  先这么使用吧，算是满足需求了

vue关于createElement函数，domProps了解下，简单的结构可以用这个实现

• 可行方案二：使用jsx，直接return （HTML结构）

表格滚动到顶部或底部（原链接）

$refs.table： 为el-table设置的ref属性

滚动到第一行：

this.$refs.table.bodyWrapper.scrollTop =0;

滚动到最后一行：

this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;

upload上传组件控制上传图片尺寸

主要在before-upload函数中限制尺寸大小等。

<el-upload
                  class="upload-demo"
                  action="/form/upload?secure=1"
                  :limit="uploadCount"
                  :multiple="false"
                  :file-list="file"
                  list-type="file"
                  accept=".jpg,.jpeg"
                  :before-upload="beforePicUpload"
                  :on-success="handlePicSuccess"
                  :on-remove="removePicSuccess"
                >
                  <el-button
                    size="small"
                    type="primary"
                  >点击上传</el-button>
                  <div
                    slot="tip"
                    class="el-upload__tip"
                  >只能上传jpg/jpeg文件，且不超过500kb</div>
                </el-upload>

beforePicUpload (file) {
    const isSize = new Promise(function(resolve, reject) {
        let width = 200;
        let height = 54;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
      }).then(() => {
        return file;
      }, () => {
        this.$message.error('上传图片尺寸要求200*200!');
        return Promise.reject();
      });
}

Element UI的文件上传组件el-upload的表单校验required问题

template:

    <el-form
        label-width="130px"
        :model="collectionInfos"
        ref="collectionRef"
        :rules="rules"
      >
        //...
        <el-row>
          <el-form-item
            label="上传合辑封面"
            prop="resource_url"
          >
            <el-upload
              ref="uploadRef"
              class="upload-demo"
              action=""
              :limit="1"
              :multiple="false"
              :file-list="file"
              list-type="picture"
              accept=".jpg,.jpeg"
              :auto-upload="false"
              :http-request="uploadFile"
              :before-upload="beforePicUpload"
              :on-change="handleChange"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
            >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >支持格式：jpg、jpeg 像素要求640*240</div>
            </el-upload>
          </el-form-item>
        </el-row>
        //...
      </el-form>

script:

export default {
    data () {
      collectionInfos: {},
      rules: {
        ...
        resource_url: [
          { required: true, message: '请选择合辑封面', trigger: 'blur, change' },
        ]
      },
    },
 }

类似这样的校验规则在空表单提交时是会正常显示请选择合辑封面的错误提示的，然而在你上传完图片后再次提交，依然会校验不通过，因
为在你选择手动提交文件时，这个resource_url就不可能像自动上传那样有值了，除非手动赋值，而文件的改变删除等变动当然由on-change事件处理比较合适，而且我试了多次，其他地方还是会出现校验不通过的情况，如下图：

    //el-upload组件里绑定的事件（可以参开上面template）
    handleChange (file, fileList) {
      this.file = fileList;
      this.$set(this.collectionInfos, 'resource_url',file.url);
    },

这样就解决了。

el-upload的默认图片

当表单牵涉修改时，需要把原有的信息填写，文件上传组件如何处理呢？

把原图片拿过来，在组件绑定的文件对象传入初始的图片对象，需要url和name属性即可把文件在组件内显示出来：

    this.file.push({
      url: selectedData.resource_url,
      name: selectedData.resource_name,
    });

template:

    <el-upload
      class="upload-demo"
      action=""
      :limit="uploadCount"
      :multiple="false"
      :file-list="file" //文件
      ......

表单回车事件

当from表单只有一个输入框时，敲击回车会导致页面刷新，处理方式 在el-form添加@submit.native.prevent

<el-form ref="form" :model="user" :rules="rules" class="login-form" @submit.native.prevent>

input添加回车事件

<el-form-item label="机构/公司名称">
  <el-input v-model="form_filter.org_name" @keyup.enter.native="submitForm('filterRef')"></el-input>
</el-form-item>

修改全局配置

//全局修改默认配置
Element.Dialog.props.closeOnClickModal.default=false;