element组件应用细节记录

（一）el_dialog

1、动态设置标题

设置标题用title="名称"
动态设置标题用:title="IssueForm.ItemInfo.Name"

2、改变标题style

使用template 标签添加 slot属性

<el-dialog
       :visible.sync="dialogVisible"
        width="30%"
       :before-close="handleClose">
        <template slot="title"> //修改title样式
             <div class='titleZise'>处理结果<span>({{workNameText}})</span></div>    
        </template>    
        //弹出框里面的内容
        <div>666</div>
</el-dialog>

 

（二）el_tabs

1、设置选中项

el-tabs设置选中项需要赋值索引。且索引要是string类型

//根据传入的brandCode设置tab选中项
    let code=this.$route.params.brandCode || '';
    let index=-1;
    //在tabs候选项数组里查找指定的brandcode
    this.dataList.find(function(item,i){
      if(item.orgCode == code){
        index=i;//记录指定项的索引
        return;
      }
    });
    this.activeName=index.toString()//设置tabs默认值

 

（三）树形

1、获取选中的叶子节点　

使用this.$refs.tree.getCheckedNodes()获取选中的所有节点，然后遍历判断

 <!-- 带有顶部搜索框的Tree -->
<div class="org-div">
    <el-input v-model="tree.filterText" :placeholder="tree.inputPlaceholder" prefix-icon="el-icon-search" />
        <el-tree
            ref="tree"
            :data="tree.list"
            :props="treeDefaultProps"
            node-key="id"
            show-checkbox
            highlight-current
            default-expand-all
            :filter-node-method="TreefilterNode"
            style="margin-top:10px;max-height:400px"
            @check="handleTreeCheck"
        />
</div>                

<script>
export default {
    data: function() {
        return {
            tree:{
                treeDefaultProps: {children: "children",label: "label"}, //树形绑定数据格式
                inputPlaceholder:"",
                filterText:"",
                selectParam:{}, //list筛选参数
                list:[],  //tree绑定数据，格式为[{children: "children",label: "label"}]
                selectedList:[],
            },
        };
    },  
    methods: {
        //Tree搜索关键字
        TreefilterNode(value, data){
          if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //Tree节点选中触发-按选中内容渲染中间表数据
        handleTreeCheck(){
          this.tree.selectedList=[]; //存放选中叶子节点
          this.$refs.tree.getCheckedNodes().forEach(element => {
          if(element.children==undefined){
              let oitem={name:element.label,id:element.id};
              this.tree.selectedList.push(oitem);
            }
          });
        },
    },
};
</script>

 

（四）表单验证 this.$refs[formName].validate()里面的内容不执行

 

 

 

 

解决：
自定义规则时，需要添加callback（）回调，不然验证过不去。
检查自定义验证里面，是否使用if elseif 而忽略了最后的else中的callback。