Y_余悸
Y_余悸

用vue-elementui 制作表格（一）

vue 制作表格，效果图如下:
用vue-elementui 制作表格（一）_第1张图片
表格制作方法如下(代码如下):

在这里插入代码片
```<template>
  <div class="contents">
    <div>
      <el-dialog title="档案报送单" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%">
        <div id="printTest1" v-if="listinfo.length>0">
          <thead><tr><th colspan="8" id="title">新任中管干部档案报送单th>
            tr>
            thead>
            <tbody>
            <tr style="height:40px">
              <td>姓名td>
              <td colspan="3" v-if="name!=''">{{item.name}}td>
              <td colspan="3">档案卷数td>
              <td colspan="1">1td>
            tr>
            <tr style="height:40px">
              <td>工作单位及职务td>
              <td colspan="7">{{item.jobTitle}}td>
            tr>
            <tr style="height:40px">
              <td>任职时间td>
              <td colspan="7">{{item.joinWorkTime | dateFmt('YYYY-MM-DD')}}td>
            tr>
            <tr style="height:60px">
              <td>档案整理人td>
              <td colspan="3" v-if="name!=''">{{item.name}}td>
              <td colspan="3">档案审核人td>
              <td colspan="1" v-if="name!=''">{{item.name}}td>
            tr>
            <tr style="height:180px">
              <td><div style="width: 70px;margin: auto!important;">干部档案遗留问题或需要说明的情况div>td>
              <td colspan="7">无td>
            tr>
            <tr style="height:180px">
              <td><div style="width: 70px;margin: auto!important;">报送单位预览div>td>
              <td colspan="7">
                <div class="right">
                  <div class="top">
                    <span class="leader" v-if="name!=''">领导签字:{{item.name}}span>
                    <span class="official_seal">(公章)span>
                  div>
                  <div class="bottom">
                    <span class="year">{{item.workingTime | dateFmt('YYYY')}}年span>
                    <span class="month">{{item.workingTime | dateFmt('MM')}}2月span>
                    <span class="day">{{item.workingTime | dateFmt('DD')}}日span>
                  div>
                div>
              td>
            tr>
            tbody>
          table>
        div>
        <div v-else style="text-align: center;color: red; font-size: 32px!important;">暂无档案报送单表格数据~div>
        <span slot="footer" class="dialog-footer">
              <el-button  type="primary" @click="confirm" size="mini">打印el-button>
              <el-button  @click="cancel" size="mini">取消el-button>
        span>
      el-dialog>
    div>
  div>
template>
<script>
//这个js是封装的url 请求接口是调用，可以看下方的request
import { request } from "@/utiles/request.js";
export default {
  name: "SubmissionForm",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    dialogFormVisible() {
      this.chushi();
      if (this.dialogFormVisible == false) {
        this.$emit('dialog');
      }
    }
  },
  data(){
    return{
      listinfo:[],   //定义数组 数据
      sids:[], //需要传数组id
    }
  },
  created() {
    this.chushi();
  },

  methods:{
  //父组件里传过来的值

 1. List item

    init(sids){
      this.sids=sids;
    },
    chushi(){
    //请求接口数据，并且渲染页面数据
      request({
        url:'/submit/getPrintList',
        method:'get',
        params:{
          ids:this.sids+''
        }
      }).then(res=>{
        this.listinfo=res.data.data
      })
    },
    closeDialog(){
      this.listinfo=[];
    },
    //打印
    confirm(){ 
       //这里暂时不展示
    },
    //点击取消按钮时关闭弹框
    cancel(){
      this.$emit('dialog');
    },
  }
}
script>
<style scoped lang="less" >
//表格样式
#printTest1 .right .top .leader{
  float:left;
  margin-left:30px!important;
}
#printTest1 .right .top{
  margin-top: 100px!important;
}
#printTest1 .right .top .official_seal{
  margin-right: 30px!important;
}
#printTest1 .bottom{
  margin-top: 10px!important;
}
#printTest1 .bottom .year,#printTest1 .bottom .month{
  margin-right: 40px!important;
}
#printTest1 #title{
  padding-top:50px!important;
  padding-bottom: 30px!important;
}
#printTest1{
  width: 70%;
  margin: auto;
  border: 2px solid black;
  padding-bottom: 30px!important;
}
#printTest1 table{
  border-collapse:collapse;
}
#printTest1 table thead th{
  font-size: 20px;
  padding:10px;
}
#printTest1 table tbody tr{
  height:30px;
  font-size:14px;
}
#printTest1 table tbody td{
  width:25%;
  border: 1px solid black;
  text-align: center!important;
}
#printTest1 table tbody td span{
  margin-right:20px;
}
//截至
下面的样式是 弹框组件样式 如:标题等等
.contents /deep/ .el-dialog__title{
  font-size: 15px!important;
}
.contents  /deep/  .el-form{
  /*width: 410px!important;*/
  margin: auto!important;
}
.contents  /deep/  .el-dialog__body{
  padding: 20px 10px!important;
}
.contents .ml{
  margin-bottom: 15px!important;
  border-left: 3px solid #447FC1;
  padding-left: 10px!important;
  font-size: 18px!important;
  font-weight: 500;
  font-size: 15px!important;
  margin-left: 15px!important;
}
.style /deep/ .el-input__inner{
  margin-bottom: 15px!important;
}
style>
终于解决vue如何 制作表格了，其实还是蛮简单的哈，慢慢来就好，大佬们，一块加油吧，顶！！！！
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(vue,html)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • swagger访问路径
                        igotyback
swagger
                        
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
    
                    
    • 
                    
  • html 中如何使用 uniapp 的部分方法
                        某公司摸鱼前端
htmluni-app前端
                        
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
    
                    
    • 
                    
  • 四章-32-点要素的聚合
                        彩云飘过

                        
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • vue3中el-table中点击图片放大时，被表格覆盖
                        叫我小鹏呀
vue.jsjavascript前端
                        
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
    
                    
    • 
                    
  • vue项目element-ui的table表格单元格合并
                        酋长哈哈
vue.jselementuijavascript前端
                        
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
    
                    
    • 
                    
  • Vue中table合并单元格用法
                        weixin_30613343
javascriptViewUI
                        
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • vue+el-table 可输入表格使用上下键进行input框切换
                        以对_
vue学习记录vue.jsjavascript前端
                        
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
    
                    
    • 
                    
  • vue + Element UI table动态合并单元格
                        我家媳妇儿萌哒哒
elementUIvue.js前端javascript
                        
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
    
                    
    • 
                    
  • 00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
    
                    
    • 
                    
  • 详解：如何设计出健壮的秒杀系统？
                        夜空_2cd3

                        
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
    
                    
    • 
                    
  • vue 创建项目报错：command failed: npm install --loglevel error
                        那鱼、会飞
vue.jsvue-cli3
                        
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
    
                    
    • 
                    
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）
                        java毕设程序源码王哥
php课程设计vue.js
                        
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 斟一小组鸡血视频
                        和自己一起成长

                        
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
    
                    
    • 
                    
  • vue render 函数详解 (配参数详解)
                        你的眼睛會笑
vue2vue.jsjavascript前端
                        
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • Dockerfile命令详解之 FROM
                        清风怎不知意
容器化java前端javascript
                        
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
    
                    
    • 
                    
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
                        焚木灵
node.jsvue
                        
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
    
                    
    • 
                    
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
    
                    
    • 
                    
  • 《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    
                    
    • 
                    
  • 【C语言】- 自定义类型：结构体、枚举、联合
                        Cavalier_01
C语言
                        
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                                
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor
                                    yangshangchuan
信息抽取HtmlExtractor精准抽取信息采集
                                    
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。 
   
HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 
如
    
                                
    • 
                                
  • java编程思想 -- 多态
                                    百合不是茶
java多态详解
                                    
    一: 向上转型和向下转型 
面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
    
                                
    • 
                                
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系
                                    comsci
dp
                                    
     
      对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长.... 
 
      首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
    
                                
    • 
                                
  • storm 自定义 日志文件
                                    商人shang
stormclusterlogback
                                    
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 
1. 想要进行一些调试信息的输出 
2. 调试信息或者业务日志信息想要输出到一些固定的文件中 
  
不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
    
                                
    • 
                                
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录
                                    21jhf

                                    
    springMVC使用 @RequestBody(required = false) UserVO userInfo 
传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： 
（由于使用了父类aaa
    
                                
    • 
                                
  • 一些排错方法
                                    文强chu
方法
                                    
    1、java.lang.IllegalStateException: Class invariant violation 
at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) 
at o
    
                                
    • 
                                
  • Swing中文件恢复我觉得很难
                                    小桔子
swing
                                    
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！ 
       用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
    
                                
    • 
                                
  • php 文件操作
                                    aichenglong
PHP读取文件写入文件
                                    
    1 写入文件 
@$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); 
if(!$fp){ 
 echo "open file error" ; 
 
exit; 
} 
$outputstring="date:"." \t tire:".$tire."
    
                                
    • 
                                
  • MySQL的btree索引和hash索引的区别
                                    AILIKES
数据结构mysql算法
                                    
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。           
可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
    
                                
    • 
                                
  • JAVA的抽象--- 接口 --实现
                                    百合不是茶

                                    
    抽象 接口 实现接口 
  
//抽象 类 ,方法 
  
//定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 
抽象的定义使用abstract 
  
abstract class A 定义一个抽象类 例如： 
//定义一个基类
public abstract class A{ 
  
  
//抽象类不能用来实例化，只能用来继承 
//
    
                                
    • 
                                
  • JS变量作用域实例
                                    bijian1013
作用域
                                    
    <script> 
    var scope='hello'; 
    function a(){ 
       console.log(scope);   //undefined 
       var scope='world'; 
       console.log(scope);   //world 
       console.log(b);      
    
                                
    • 
                                
  • TDD实践（二）
                                    bijian1013
javaTDD
                                    
    实践题目：分解质因数 
Step1： 
单元测试： 
package com.bijian.study.factor.test;

import java.util.Arrays;

import junit.framework.Assert;

import org.junit.Before;
import org.junit.Test;

import com.bijian.
    
                                
    • 
                                
  • [MongoDB学习笔记一]MongoDB主从复制
                                    bit1129
mongodb
                                    
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。 
  事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。   本文介绍MongoDB的主从复制模式，需要指明
    
                                
    • 
                                
  • 【HBase五】Java API操作HBase
                                    bit1129
hbase
                                    
    import java.io.IOException;

import org.apache.hadoop.conf.Configuration;
import org.apache.hadoop.hbase.HBaseConfiguration;
import org.apache.hadoop.hbase.HColumnDescriptor;
import org.apache.ha
    
                                
    • 
                                
  • python调用zabbix api接口实时展示数据
                                    ronin47

                                    
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
    
                                
    • 
                                
  • jsp取得绝对路径
                                    byalias
绝对路径
                                    
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 
 
一、使用${pageContext.request.contextPath} 
 
　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。 
 

    
                                
    • 
                                
  • Java定时任务调度：用ExecutorService取代Timer
                                    bylijinnan
java
                                    
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 
如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
    
                                
    • 
                                
  • SQL 优化原则
                                    chicony
sql
                                    
      
一、问题的提出 
　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
    
                                
    • 
                                
  • java 线程弹球小游戏
                                    CrazyMizzz
java游戏
                                    
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 
 
 这里是提纲 
 1.线程弹球游戏实现 
 1.实现界面需要使用哪些API类 
 JFrame 
 JPanel 
 JButton 
 FlowLayout 
 Graphics2D 
 Thread 
 Color 
 ActionListener 
 ActionEvent 
 MouseListener 
 Mouse
    
                                
    • 
                                
  • hadoop jps出现process information unavailable提示解决办法
                                    daizj
hadoopjps
                                    
    hadoop jps出现process information unavailable提示解决办法       
jps时出现如下信息： 
3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 -- 
    
                                
    • 
                                
  • PHP图片水印缩放类实现
                                    dcj3sjt126com
PHP
                                    
      
<?php
class Image{

	private $path;


	function __construct($path='./'){
		$this->path=rtrim($path,'/').'/';
	}

	//水印函数，参数：背景图，水印图，位置，前缀,TMD透明度

	public function water($b,$l,$pos
    
                                
    • 
                                
  • IOS控件学习：UILabel常用属性与用法
                                    dcj3sjt126com
iosUILabel
                                    
    参考网站： 
http://shijue.me/show_text/521c396a8ddf876566000007 
http://www.tuicool.com/articles/zquENb 
http://blog.csdn.net/a451493485/article/details/9454695 
http://wiki.eoe.cn/page/iOS_pptl_artile_281
    
                                
    • 
                                
  • 完全手动建立maven骨架
                                    eksliang
javaeclipseWeb
                                    
    建一个 JAVA 项目 ： 
mvn archetype:create 
-DgroupId=com.demo 
-DartifactId=App 
[-Dversion=0.0.1-SNAPSHOT] 
[-Dpackaging=jar] 
 
 
建一个 web 项目 ： 
mvn archetype:create 
-DgroupId=com.demo 
-DartifactId=web-a
    
                                
    • 
                                
  • 配置清单
                                    gengzg
配置
                                    
    1、修改grub启动的内核版本
vi /boot/grub/grub.conf
将default 0改为1

拷贝mt7601Usta.ko到/lib文件夹

拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹

拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan
拷贝wifiget.sh到bin文件夹，chm
    
                                
    • 
                                
  • Windows端口被占用处理方法
                                    huqiji
windows
                                    
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
    
                                
    • 
                                
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！
                                    天梯梦
mobile
                                    
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
    
                                
    • 
                                
  • 简单工厂设计模式
                                    hm4123660
java工厂设计模式简单工厂模式
                                    
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。 
    
                                
    • 
                                
  • maven笔记
                                    zhb8015
maven
                                    
    跳过测试阶段： 
mvn package -DskipTests 
临时性跳过测试代码的编译： 
mvn package -Dmaven.test.skip=true 
  
maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。 
  
指定测试类 
mvn test
    
                                
    • 
                                
  • 非mapreduce生成Hfile，然后导入hbase当中
                                    Stark_Summer
maphbasereduceHfilepath实例
                                    
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
    
                                
    • 
                                
  • jsp web tomcat 编码问题
                                    王新春
tomcatjsppageEncode
                                    
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： 
 
 

      <Connector port="8080" protocol="HTTP/1.1" 
               connectionTi
    
                                
    •