angular-ui-tree中禁止拖拽和下拉按钮浮动的问题

在网上找了各种博客地址,怎么使用angular-ui-tree构建一颗树,网上关于这个博客很多,基本上可以满足要求,但是在使用的过程中,还是遇到了一些问题,参考了其他博客的内容之后,完美解决,得到一个自己满意的tree。

angular-ui-tree的使用,参考博客地址链接

在这个博客中,没有设置tree的样式,所以得到的tree不怎么好看,git上的demo中/example/css/app.css这个样式文件,可以让tree变得好看,但是我把这个样式加进代码中之后,遇到了下面两个问题:

1.点击下拉按钮上的图标,折叠tree时,没有反应(此时点击下拉按钮上的其他位置可以折叠tree)

解决方法:在app.css样式文件中,加入下列样式即可解决。

ol{list-style:none}

2.正常情况下使用angular-ui-tree构建的tree,会提供拖拽的功能,但是,由于业务需求,需要禁止拖拽功能

解决方法:在构件tree的html文件中加入data-drag-enabled = “false”即可,加入代码的位置参考如下:


<div class="col-sm-6">
  <div ui-tree data-drag-enabled="false" id="tree">
    <!-- 整个树div -->
    <ol ui-tree-nodes="" ng-model="tree">
      <!-- 调用模板 -->
      <li ng-repeat="node in tree" ui-tree-node ng-include="'nodes_renderer.html'"></li>
    </ol>
  </div>
</div>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI 是一个基于 Vue.js 的 UI 组件库,如果要在 Angular 使用 Element-UI,需要先安装 Vue.js,并且在 Angular 集成 Vue.js。 具体步骤如下: 1. 安装 Vue.js 在 Angular 项目安装 Vue.js,可以使用 npm 命令进行安装: ``` npm install vue --save ``` 2. 安装 Element-UIAngular 项目安装 Element-UI,同样可以使用 npm 命令进行安装: ``` npm install element-ui --save ``` 3. 集成 Vue.js 在 Angular 集成 Vue.js,可以使用 ngx-build-plus 插件。在 Angular 项目安装 ngx-build-plus: ``` npm install ngx-build-plus --save-dev ``` 然后在 angular.json 文件配置 ngx-build-plus: ``` "architect": { "build": { "builder": "ngx-build-plus:browser", "options": { "extraWebpackConfig": "./extra-webpack.config.js" }, "configurations": { "production": { "extraWebpackConfig": "./extra-webpack.config.js" } } } } ``` 在 extra-webpack.config.js 文件配置 Vue.js 的 loader: ``` const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueLoaderPlugin() ] } ``` 4. 在 Angular 使用 Element-UIAngular 使用 Element-UI,需要先在组件引入 Vue.js 和 Element-UI: ``` import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI) ``` 然后在组件使用 Element-UI 的组件: ``` <template> <el-button>Button</el-button> </template> <script> export default { name: 'MyComponent' } </script> ``` 这样就可以在 Angular 使用 Element-UI 了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值