阅读 10

技术点小记

工作、学习中的心得笔记,比较粗糙,勿喷!仅此~~

1、el-tree 树形结构菜单

  • 点击一级菜单,异步加载二级子菜单
  • 鼠标移入,添加 '删除' 按钮
 <el-tree
     :data="list"
     :props="defaultProps"
     :load="getData"
     node-key="id"
     lazy
     :highlight-current="true"
     @node-click="handleNodeClick"
    :render-content="renderContent">
</el-tree>

// data中的数据
list: [{
          label: 'aaa',
          children: [
            {is_show: false, // 子级要加is_show,因为子级需要添加'删除'按钮
              label: 'aaa111' },
            {is_show: false,
              label: 'aaa222' }
          ]
        }],
    
defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf:'leaf'
        },
 // 测试数据       
childrenData: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]}],
          
          
methods: {
    getList(){
      this.$http({
          method: "get",
          url: "/getList"
        })
          .then(response => {
            if (响应成功) {
                this.list.push(
                  {label: item.name, children: [], loading: false, leaf:false}
                )
            } else {
              this.$message.error(error.msg);
            }
          })
          .catch(error => {
            this.$message.error(error.message);
          }); 
    }
}

// el-tree 点击事件 判断点击的一级菜单,并异步请求二级子菜单,把数据塞到父级
  handleNodeClick(node, data) {
    console.log(node, data);
  },
       
// 鼠标移入 el-tree 添加‘删除’按钮,鼠标移出,隐藏按钮
renderContent(h, { node, data, store }) {
    // console.log('node', node) // 节点及子节点信息
    // console.log('data', data) // 节点自身
    // console.log('store', store) // 整个tree的信息
    return h('div', {
      style: {
    	color: "red",
        position: 'relative', width: '100%'
      },
      //这里添加hover事件
      on: {
        'click': () => {
          data.is_show = true;
        },
        'mouseenter': () => {
          data.is_show = true;
        },
        //鼠标离开
        'mouseleave': () => {
          data.is_show = false;
        }
      }
    }, [
      h('div', {
        //显示按钮名称
      }, node.label),
      h('div', {
        style: {
          display: data.is_show ? '' : 'none',
        },
      }, [
        h('el-button', {
          props: {
            type: 'text',
            size: 'small',
          },
          style: {
            position: 'absolute', right: 0, top: 0
          },
          on: {
            click: () => {
              this.remove(node, data)
            }
          }
        }, "删除"),
      ]),
    ]);
},
     
// 删除方法
 remove(store, data) {
    store.remove(data);
  },
          
复制代码

2、v-for循环出来的 el-form-item 单项表单校验

<el-form
    ref="date"
    :model="date"
    :rules="rule"
    label-width="0"
  >
     <el-row v-for="(item, index) in date.list" >
       <el-col :span="24" align="left">
         <el-form-item  :prop="'list['+index+'].v'" :rules="list.value">
           <el-input v-model="item.v"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
   </div>
</el-form>

// data数据
date: {
  list: []
},
rule: {
  value: [{required: true, message: '请填写参数', trigger: 'blur'}, {validator: checkPara}]
},
复制代码
关注下面的标签,发现更多相似文章
评论