注意:elment-ui和vue的版本问题易引起bug
- el-tree中通过slot-scope自定义树节点的内容,参数为 { node, data },但是只有vue2.5以上版本支持slot-scope,所以报错,node or data没有定义等错误
- 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