Vue

elementUi树形控件筛选并单选

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-30 12:49 我要评论

elementUi树形控件筛选并单选...

功能图


HTML

<!-- 筛选 -->
   <el-dialog title="选择部门" :visible.sync="selectDialogVisible" width='25%' :before-close="handleClose">
   <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
 
   <el-tree class="filter-tree" :data="department" :props="Props" show-checkbox node-key="id" :check-strictly="true" default-expand-all :default-checked-keys="[ruleForm.deptId]" :filter-node-method="filterNode" ref="tree2"
@check-change="checkChange" @node-click="nodeClick"
> </el-tree>
 
   <span slot="footer" class="dialog-footer">
   <el-button type="primary" @click="confirm">确 定</el-button>
   <el-button @click="cancel">取 消</el-button>
   </span>
   </el-dialog>
<!-- 筛选 -->
 

DATA
   filterText:'',
   temporaryID: "",
   temporaryName:'',
   department: [],
   Props: {
      children: 'orgList',
      label: 'orgName',
      value: "id"
   },

script
   filterNode(value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
   },
 
   checkChange(item, node, self) {
      if (node == true) {
      //点击未选中复选框
      console.log(item)
      this.ruleForm.id = item.id;
      this.editCheckId = item.id;
      this.$refs.tree2.setCheckedKeys([item.id]);
      this.temporaryID = item.id
      this.temporaryName = item.orgName
   } else {
      if (this.editCheckId == item.id) {
      this.temporaryID = item.id
      this.temporaryName = item.orgName
      //点击已选中复选框,保证至少一个选中
      this.$refs.tree2.setCheckedKeys([item.id]);
      }
      }
   },
 
   nodeClick(item, node, self) {
      this.editCheckId = item.id;
      this.$refs.tree2.setCheckedKeys([item.id]);
   },

   confirm(){
      this.ruleForm.deptId = this.temporaryID
      this.ruleForm.orgName = this.temporaryName
      this.selectDialogVisible = false
   }

Mounted
   watch: {
      filterText(val) {
      this.$refs.tree2.filter(val);
      }
   }




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评