实现ElementUI中el-tree的单选功能,主要实现如下:

data() {
  return {
    monitorFactor: [],
    monitorFactorTree: []
  }  
},
<el-tree
  ref="tree"
  :data="monitorFactorTree"
  default-expand-all
  show-checkbox
  node-key="value"
  :default-checked-keys="monitorFactor"
  @current-change="handleCheckChange"
  @check="handleCheck"
  empty-text="暂无数据"
></el-tree>
getMonitorFactorTree() {
  const params = {
    stationId: this.stationId,
    fieldType: this.fieldType
  }
  getMonitorFactorCommonlyTree(params).then((res) => {
    if (res.code === HttpEnum.SUCCESS) {
      this.monitorFactorTree = res.rows
    } else {
      console.log(res.msg)
    }
  })
},
handleCheck(data) {
  if (!data.children) {
    this.monitorFactor = [data.value]
  }
  this.$refs.tree.setCheckedKeys(this.monitorFactor)
},
handleCheckChange(data) {
  if (!data.children) {
    this.monitorFactor = [data.value]
  }
  this.$refs.tree.setCheckedKeys(this.monitorFactor)
},
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐