组件使用

雨点打透心脏的1/2处 2022-02-03 15:11 127阅读 0赞

### 1.angular分页插件pagination.js ###

> 1.  引入angular，bootstrap，pagination等

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>    
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css"/>

> 1.  HTML代码

<tm-pagination conf="paginationConf"></tm-pagination>

> 1.  pagination配置

// 分页控件配置
    $scope.paginationConf = { 
    	currentPage:1,// 当前页
    	totalItems:10,// 总记录数
    	itemsPerPage:10,// 每页显示的记录数
    	perPageOptions:[10, 20, 30, 40, 50],// 分页选项
    	onChange: function() { 
    		//操作
    	}
    };

> 1.  效果

![pagination][]

### 2. select2 ###

> 1.  引入angular，bootstrap,select2等

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    
    <script type="text/javascript" src="../plugins/select2/angular-select2.js"></script>

> 1.  修改typeTemplateController.js ，定义品牌列表数据

$scope.brandList = { data:[{ id:1,text:'联想'},{ id:2,text:'华为'},{ id:3,text:'中兴'}]};

> 1.  HTML代码

<input select2 select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>

说明：
    	select2：表示多选下拉框
    	config：数据来源
    	select2-model：把选择的数据提交到这个变量上
    	mutiple：可多选，没有则只能单选

> 1.  效果

![select2][]

[pagination]: /images/20220203/afc9625b39b747fa893d0e3bb5e4de01.png
[select2]: /images/20220203/081d171ff06b4293bd2e98261e95feef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue--组件通信--子组件向父组件传值--使用/教程/实例

原文网址：[Vue--组件通信--子组件向父组件传值--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_--_IT_-CSDN] 简介说明

比眉伴天荒/ 2023年10月02日 14:09/ 0 赞/ 52 阅读

相关 Vue.js note6（组件component的使用&全局组件&局部组件）

1、什么是组件我们知道，vue的核心是数据驱动与组件化，所以组件是非常重要的。那么组件是什么呢？组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组

浅浅的花香味﹌/ 2023年02月27日 12:08/ 0 赞/ 21 阅读

相关 VUE动态创建使用组件、覆盖根组件

<div id="app"> app根组件 </div> let app = new Vue({ el: 'app',

小灰灰/ 2023年02月26日 14:22/ 0 赞/ 49 阅读

相关日志组件logback使用详解

背景问题定位是日常程序开发过程中不可或缺的一部分，能高效的定位程序中的问题能大大提高开发的效率。目前程序中所存在的问题大致有以下两种类型: 1、代码本身有

梦里梦外;/ 2022年06月05日 10:47/ 0 赞/ 532 阅读

相关 Vue之使用组件

创建一个组件Header.vue <template> <div class="header"> 这是header

超、凢脫俗/ 2022年04月22日 10:52/ 0 赞/ 305 阅读

相关子组件在父组件里面使用

想在父组件里面写子组件，其实只需要把父组件在“router/index.js”里面把父组件引入，然后注册，接着在父组件中“index.vue”中引入想用的子组件，然后注册，接

￡神魔★判官ぃ/ 2022年03月09日 10:06/ 0 赞/ 300 阅读

相关组件使用

1.angular分页插件pagination.js > 1. 引入angular，bootstrap，pagination等 <script src="..

雨点打透心脏的1/2处/ 2022年02月03日 15:11/ 0 赞/ 128 阅读

相关 Swing使用JTable表格组件

表格是最常用的数据统计形式之一，在Swing中由JTabel类实现表格。示例：使用JTable表格组件，动态绑定数据。如下图： ![watermark_type_ZmFu

偏执的太偏执、/ 2021年09月18日 00:04/ 0 赞/ 593 阅读

相关 uniapp基本语法/组件使用

条件渲染 v-if 指令用于条件性地渲染一块内容 <template> <view> <view v-if="now"

悠悠/ 2021年09月13日 15:54/ 0 赞/ 964 阅读

相关 vue子组件使用父组件的methods

1、子组件通过 this.$parent.event 调用父组件方法父组件： <template> <div> <ch

「爱情、让人受尽委屈。」/ 2021年07月25日 22:16/ 0 赞/ 515 阅读