zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    【POJ 1958】 Strange Towers of Hanoi
    【HNOI 2003】 激光炸弹
    【POJ 3263】 Tallest Cow
    【POJ 2689】 Prime Distance
    【POJ 2777】 Count Color
    【POJ 1995】 Raising Modulo Numbers
    【POJ 1845】 Sumdiv
    6月16日省中集训题解
    【TJOI 2018】数学计算
    【POJ 1275】 Cashier Employment
  • 原文地址:https://www.cnblogs.com/Yan3399/p/14661843.html
Copyright © 2011-2022 走看看