vue 运用element-ui遇见的一些问题总结记录

前面几个项目一直在用element-ui，总结起来，自带的一些组件真的很方便，便于我们快速开发，但是也有一些小问题，比如里面自带的一些方法属性，给的很简洁的概述，要是第一次用还真不好用。之前也是用的时候一个个找，也没怎么记录，后边想想还是留个记录吧，方便以后查阅。本文很多地方只做简单的功能点介绍或者说是提供了思路，具体的实现复杂的功能还是需要聪明的你来做。（本文持续更新....）

1、table组件的问题

（1）table组件的formatter属性（用来格式化内容）

 <template>
    <el-table :data="tableData" >
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" :formatter="toHtml"  width="180">
      </el-table-column>
    </el-table>
  </template>
  export default {
    name: 'theme',
    data() {
      return {
         tableData: [{
            date: '2016-05-02',
            name: '王小虎'
          }, {
            date: '2016-05-04',
            name: '刘小二'
          }]
      }，
      methods: {
       toHtml(value, cloumn) {
        return this.$createElement('b', value[cloumn.property]);
      }
    }
   }
此方法会让 “姓名” 这一列加粗，当然了还可以实现很多，自己去试试吧

效果如下图，默认情况下，姓名是不加粗的，这里我们让他加粗了。

1.jpg

（2）table组件的单元格如何插入html内容

 <template>
    <el-table :data="tableData" >
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" :formatter="toHtml"  width="180">
          <template scope="myscope">
               <b style="color:blue" @click="test(myscope.row.date)" v-if="myscope.row.name=='王小虎'">{{myscope.row.name}}</b>
                <b style="color:red" v-else>{{myscope.row.name}}</b>
          </template> 
      </el-table-column>
    </el-table>
  </template>
  export default {
    name: 'theme',
    data() {
      return {
         tableData: [{
            date: '2016-05-02',
            name: '王小虎'
          }, {
            date: '2016-05-04',
            name: '刘小二'
          }]
      }
    },
    methods:{
    test(e){
     alert(e)
    }
    }
   }

此方法用于插入html,据效果图可以看到style和函数都有，具体复杂的可以自己测试。此处说下<template scope="myscope">,这里scope的值用于临时存储上个组件传递进来的值，效果如下：

2.jpg

（3）关于上传图片的问题

如果一个页面有很多个上传，并且这个上传功能是根据数据动态渲染的，那么如果让上传跟字段绑定呢？

<el-upload
         :ref="item.fieldName"
         :action="importFileUrl"
         :on-change="(res,file)=>{return uploadFileImage(res,file, item.fieldName)}"
         :on-preview="handlePreview"
         :file-list="form[item.fieldName]">
 </el-upload>

这里我想表达的是on-change方法后边的函数，正常on-change方法会返给我们2个字段，一个res,file，但是我们这样写，就可以往下多传递个需要的字段。

（4）el-checkbox-group动态绑定的问题，会出现点击一个结果全部选中的问题

 <el-form-item v-if="item.type==='checkbox'" :label="item.name">
    <el-checkbox-group v-model="form[item.fieldName]">
        <el-checkbox v-for="(checkboxArr,radcheckbox) in item.options.options"                 :label="checkboxArr.name" :value="checkboxArr.fieldName"></el-checkbox>
    </el-checkbox-group>
</el-form-item>

这个问题主要是 <el-checkbox-group v-model="form[item.fieldName]">这里v-model必须绑定的是个数组，切记。但是我们这样form[item.fieldName]，会默认绑定的是个字符串类型，我们可以在created里便利数据
强制this.$set(this.form, val.fieldName, [])把数据类型转换成数组类型

最后编辑于：2018.11.16 16:33:11