前面几个项目一直在用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]); } } } 此方法会让 “姓名” 这一列加粗，当然了还可以实现很多，自己去试试吧
效果如下图，默认情况下，姓名是不加粗的，这里我们让他加粗了。
（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的值用于临时存储上个组件传递进来的值，效果如下：
（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, [])把数据类型转换成数组类型
