el-tree和el-table相关使用

文章目录

- - el-tree实现模糊查询
  - el-tree实现node节点增删改
  - el-tree 实现节点懒加载
  - el-tree获取所有选中的当前节点
  - el-tree获取当前节点及其选中父节点
  - el-table 获取多选行的所有节点
  - el-table 动态添加删除行数据

el-tree实现模糊查询

<template>
  <div class="app-container">
    <el-input placeholder="请搜索" prefix-icon="el-icon-search" v-model="filterText"></el-input>
    <el-tree :data="epTree" default-expand-all :props="defaultProps" :expand-on-click-node="false" ref="tree" :filter-node-method="filterNode"></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      epTree: [
        {
          id: 1,
          label: '一级公司',
          children: [
            {
              id: 11,
              label: '一级子公司1',
              children: [
                {
                  id: 22,
                  label: '二级子公司11',
                }
              ]
            },
            {
              id: 12,
              label: '一级子公司2'
            }
          ]
        }
      ],
      // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置
      defaultProps: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      filterText:''
    }
  },

  watch:{
    filterText(val){
      this.$refs.tree.filter(val)
    }
  },

  methods:{
    filterNode(value,data){
      if(!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree /deep/ .el-tree__empty-block {
  width: 200px;
}

.el-tree /deep/ .el-tree-node > .el-tree-node__content {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #666666;
}

.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f8ff !important;
  color: #017cd9 !important;
}
</style>

el-tree和el-table相关使用

el-tree实现node节点增删改

<template>
  <div class="app-container">
    <el-tree
      :data="epTree"
      default-expand-all
      :props="defaultProps"
      :expand-on-click-node="false"
      :render-content="renderContent"
    ></el-tree>

    <el-dialog
      title="新增"
      :visible.sync="addDialog"
      width="30%"
      :before-close="handleAddClose"
      :modal-append-to-body="false"
    >
      <span>node信息：</span>
      <div>{{nodeInfo}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addDialog = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改"
      :visible.sync="editDialog"
      width="30%"
      :before-close="handleEditClose"
      :modal-append-to-body="false"
    >
      <span>node信息：</span>
      <div>{{nodeInfo}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      epTree: [
        {
          id: 1,
          label: '一级公司',
          children: [
            {
              id: 11,
              label: '一级子公司1',
              children: [
                {
                  id: 22,
                  label: '二级子公司11',
                }
              ]
            },
            {
              id: 12,
              label: '一级子公司2'
            }
          ]
        }
      ],
      // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置
      defaultProps: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      addDialog: false,
      editDialog:false,
      nodeInfo:[]
    }
  },

  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <div style="width:100%;">
          <span style="margin-right:10px;">{node.label}</span>
          <span><i on-click={() => this.append(data)} class="el-icon-plus" title="添加"></i></span>
          <span style="margin-left:8px;"><i on-click={() => this.update(data)} class="el-icon-edit" title="修改"></i></span>
          <span style="margin-left:8px;"><i on-click={() => this.delete(data)} class="el-icon-delete" title="删除"></i></span>
        </div>
      )
    },

    append(data) {
      this.addDialog = true
      this.nodeInfo = data
    },
    update(data) { 
      this.editDialog = true
      this.nodeInfo = data
    },
    delete(data) {
      this.$confirm('是否删除选中的节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 请求删除节点api
        console.log(data);
      }).catch(err => console.log(err))
    },

    handleAddClose() {
      this.addDialog = false
    },

    handleEditClose(){
      this.editDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree /deep/ .el-tree__empty-block {
  width: 200px;
}

.el-tree /deep/ .el-tree-node > .el-tree-node__content {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #666666;
}

.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f8ff !important;
  color: #017cd9 !important;
}
</style>

el-tree和el-table相关使用

el-tree 实现节点懒加载

<template>
  <div class="app-container">
    <el-tree
      :data="epTree"
      :props="defaultProps"
      :load="loadNode"
      lazy
      @check-change="handleCheckChange"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      epTree: [
        {
          id: 1,
          label: '一级公司',
          children: [
            {
              id: 11,
              label: '一级子公司1',
              children: [
                {
                  id: 22,
                  label: '二级子公司11',
                }
              ]
            },
            {
              id: 12,
              label: '一级子公司2'
            }
          ]
        }
      ],
      // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置
      defaultProps: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      // 带根节点的情况
      // rootNode: {
      //   'id': '0',
      //   'label': '所属企业分类树'
      // }
    }
  },

  methods: {
    // 带根节点的情况
    // loadNode (node, resolve) {
    //   let self = this
    //   if (node.level === 0) {
    //     console.log('第一次加载根节点');
    //     return resolve([self.rootNode])
    //   } else {
    //     console.log('加载子节点');
    //     // 加载树形结构数据
    //     // let params = {
    //     //   userId:2,
    //     //   pcode:node.id
    //     // }
    //     // fetchEpTreeData(params).then(res => {
    //     //   if(res.code === 0){
    //     //     let epTree = res.data
    //     //   }
    //     // }).catch(err => console.log(err))
    //     let epTree = this.epTree
    //     console.log('返回列表', epTree);
    //     resolve(epTree)
    //   }
    // },

    // 不带根节点
    loadNode (node, resolve) {
      // 加载树形结构数据
      // let params = {
      //   userId:2,
      //   pcode:node.id ? node.id : ''
      // }
      // fetchEpTreeData(params).then(res => {
      //   if(res.code === 0){
      //     let epTree = res.data
      //   }
      // }).catch(err => console.log(err))

      let epTree = this.epTree
      resolve(epTree)
    },

    handleCheckChange (value) {
      console.log(value);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree /deep/ .el-tree__empty-block {
  width: 200px;
}

.el-tree /deep/ .el-tree-node > .el-tree-node__content {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #666666;
}

.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f8ff !important;
  color: #017cd9 !important;
}
</style>

el-tree和el-table相关使用

el-tree获取所有选中的当前节点

<template>
  <div class="app-container">
    <el-tree
      node-key="id"
      :data="epTree"
      show-checkbox
      check-strictly
      :props="defaultProps"
      default-expand-all
      @check-change="handleCheckChange"
    >
    </el-tree>
    {{selectedKeys}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      epTree: [
        {
          id: 1,
          label: '一级公司',
          children: [
            {
              id: 11,
              label: '一级子公司1',
              children: [
                {
                  id: 22,
                  label: '二级子公司11',
                }
              ]
            },
            {
              id: 12,
              label: '一级子公司2'
            }
          ]
        }
      ],
      // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置
      defaultProps: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      selectedKeys:[]
    }
  },

  methods: {
    handleCheckChange (value) {
      if(!this.selectedKeys.includes(value.id)){
        this.selectedKeys.push(value.id)
      }else{
        this.selectedKeys = this.selectedKeys.filter(item => item !== value.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree /deep/ .el-tree__empty-block {
  width: 200px;
}

.el-tree /deep/ .el-tree-node > .el-tree-node__content {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #666666;
}

.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f8ff !important;
  color: #017cd9 !important;
}
</style>

el-tree和el-table相关使用

el-tree获取当前节点及其选中父节点

<template>
  <div class="app-container">
    <el-tree
      node-key="id"
      :data="epTree"
      show-checkbox
      :props="defaultProps"
      default-expand-all
      ref="treeRef"
    >
    </el-tree>
    <el-button type="primary" @click="getSelectedKeys"
      >获取选中节点及其父节点</el-button
    >
    {{ selectedKeys }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      epTree: [
        {
          id: 1,
          label: '一级公司',
          children: [
            {
              id: 11,
              label: '一级子公司1',
              children: [
                {
                  id: 22,
                  label: '二级子公司11',
                }
              ]
            },
            {
              id: 12,
              label: '一级子公司2'
            }
          ]
        }
      ],
      // 当获取到的数据与这里的字段不相符时，可以进行相应的对应设置
      defaultProps: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      selectedKeys: []
    }
  },

  methods: {
    getSelectedKeys () {
      this.selectedKeys = this.getCheckedKeys(this.epTree, this.$refs.treeRef.getCheckedKeys(), 'id')
    },

    getCheckedKeys (data, keys, key) {
      var res = []
      recursion(data, false);
      return res

      function recursion (arr, isChild) {
        var aCheck = []
        for (let i = 0; i < arr.length; i++) {
          var obj = arr[i]
          aCheck[i] = false
          if (obj.children) {
            aCheck[i] = recursion(obj.children, true) ? true : aCheck[i]
            if (aCheck[i]) {
              res.push(obj[key])
            }
          }

          for (var j = 0; j < keys.length; j++) {
            if (obj[key] == keys[j]) {
              aCheck[i] = true;
              if (res.indexOf(obj[key]) == -1) {
                res.push(obj[key]);
              }
              break;
            }
          }
        }
        if (isChild) {
          return aCheck.indexOf(true) != -1;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree /deep/ .el-tree__empty-block {
  width: 200px;
}

.el-tree /deep/ .el-tree-node > .el-tree-node__content {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #666666;
}

.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f8ff !important;
  color: #017cd9 !important;
}
</style>

el-tree和el-table相关使用

el-table 获取多选行的所有节点

<template>
  <div class="app-container">
    {{multipleSelections}}
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="label" label="展示"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData:[
        {
          id:1,
          label:'展示1'
        },
        {
          id:2,
          label:'展示2'
        },
        {
          id:3,
          label:'展示3'
        },
        {
          id:4,
          label:'展示4'
        },
        {
          id:5,
          label:'展示5'
        }
      ],
      multipleSelections:[]
    }
  },

  methods: {
    handleSelectionChange(val){
      this.multipleSelections = []
      val.length > 0 && val.forEach(item => {
        this.multipleSelections.push(item.id)
      });
    }
  }
}
</script>

el-tree和el-table相关使用

el-table 动态添加删除行数据

<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: '#3d80f2',
        color: '#fff',
        fontSize: '14px',
        height: '40px',
      }"
    >
      <el-table-column
        prop="numbering"
        label="编号"
        align="center"
      ></el-table-column>
      <el-table-column prop="title" label="标题" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.title"
            placeholder="请输入"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.type"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="addClick">新增</el-button>
          <el-button
            type="text"
            style="color:red;"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          numbering: "编号-1",
          title: "",
          type:null,
          status:true,
        }
      ],
      options:[
        {
          id:1,
          label:'类型1'
        },{
          id:2,
          label:'类型2'
        },{
          id:3,
          label:'类型3'
        }
      ]
    }
  },

  methods: {
    //新增方法
    addClick () {
      this.valNumer = this.valNumer + 1;
      var list = {
        numbering: "编号" + `-${this.tableData.length + 1}`,
        title: this.title,
        type:this.type,
        status:this.status
      };
      this.tableData.push(list);
    },
    //删除新增的某行数据
    handleDelete (index, row) {
      this.tableData.splice(index, 1);
      for (var i = index; i < this.tableData.length; i++) {//从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据
        this.tableData[i].numbering = "编号" + `-${Number(this.tableData[i].numbering.split("-")[1]) - 1}`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogDiv {
  height: 300px;
  overflow: auto;
}
</style>

el-tree和el-table相关使用

el-tree和el-table相关使用

文章目录

el-tree实现模糊查询

el-tree实现node节点增删改

el-tree 实现节点懒加载

el-tree获取所有选中的当前节点

el-tree获取当前节点及其选中父节点

el-table 获取多选行的所有节点

el-table 动态添加删除行数据

继续阅读

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

express 搭建后台构建工程目录结构

layui多任务上传添加进度条

手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目