element ui 使用小结——模态框、时间选择器、表格

注意：elment-ui和vue的版本问题易引起bug

1. el-tree中通过slot-scope自定义树节点的内容，参数为 { node, data }，但是只有vue2.5以上版本支持slot-scope，所以报错，node or data没有定义等错误
2. css一直在更新，所以有的样式不同，是因为css版本问题

---

首先说明，使用vue和element ui是通过script标签引入的 因此产生了一些问题，官方demo不可用(可能自己水平问题)，现将自己解决办法如下：

1. 模态框

1.打开关闭模态框
2.提交加上loading事件:loading="addLoading"

html部分
<div class="but d_btn" @click="opendialog">申诉</div>
<el-dialog 
    title="申诉" 
    v-model="dialogVisible"
    :close-on-click-modal="false">    
    <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="addLoading">提交</el-button>
    </div>
</el-dialog>

js部分
data:{
    dialogVisible:false,     //模态框是否显示
    addLoading: false,       //是否显示loading
}
method:{
    opendialog:function(){    //代开模态框
      this.dialogVisible = false 
    }
}

---

2. 时间选择器

<el-time-select  
    placeholder="起始时间"
    :editable=false            //防止用户随意输入时间，禁止编辑
    format="yy-MM-dd"          //设置时间格式
    v-model="beginOffsetTime"
    :picker-options="{
          start: '00:00',
          step: '00:30',
          end: '24:00'
    }">
 </el-time-select>

3.表格

3.1 表格formatter:列数据过滤显示

html部分
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
js部分，即method
formatSex: function (row, column) {
               return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            }

3.2 表格中添加自定义模板 编辑，删除等

html部分
<el-table-column label="操作" width="150">
    <template slot-scope="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
    </template>
</el-table-column>
js部分
handleDel: function (index, row) {}
handleEdit: function (index, row) {
                //编辑页面显示
                this.editFormVisible = true;
                //复制内容       **重重重**
                this.editForm = Object.assign({}, row);
            }

4.tab标签页

<el-tabs v-model="tabsValue" type="card" @tab-click="changeTab">
  <el-tab-pane
    v-for="(item, index) in editableTabs2"
    :key="item.name"
    :label="item.title"
    :name="item.code"
  >
    {{item.content}}
  </el-tab-pane>
</el-tabs>

• label:tab的内容
• name:tab的索引

export default {
    props:["tooth"],
    data() {
      return {
        tabsValue: '2',//根据name:2默认选中第二项
        teeth: [{
          title: 'Tab 1',
          code: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          code: '2',
          content: 'Tab 2 content'
        }],
      }
    },
    computed:{
        tabsValue:{
        //根据传来的tooth来确定code，从而选中当前项
            get:function(){
                return this.tooth.code;
            },
            set:function(){
            
            }
        }
    },
    methods:{
       changeTab:function(val){
           //val：是tab的实例，即包含tab的所有信息
       }
    }
 }

问题：computed property "tabsValue" is assigned to but it has no setter.
我在做这个功能的时候，刚开始代码：

tabsValue:function(){
     return this.tooth.code;
},
后来改为上述代码
因为在页面上切换tab的时候，element-UI会去改tabsValue的值，所以加个setter