分类：TABLE

2020
10-10

Vue filter 过滤器、以及在table中的使用介绍

使用方法：//双花括号中{{isActive|isActiveFitlter}}//在v-bind中<divv-bind:id="isActive|isActiveFitlter"></div>一、组件中定义本地Filterfilters:{isActiveFitlter:(value)=>{returnvalue===1?'激活':'冻结'}}二、创建Vue实例前定义全局过滤器Vue.filter('isActiveFitlter',(value)=>{returnvalue===1?'激活':'冻结'})newVue({//...})三、全局Filter1、自定义一个js文件，可以放在... 继续阅读 >
2020
10-09

浅谈vue获得后台数据无法显示到table上面的坑

因为刚学vue然后自己自习了一下axios，然后想写一个简单的查询后台数据<trv-for="userinuList"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.gender}}</td></td></tr>然后先是写了这样一个代码created:function(){axios.get("http://localhost:8080/student/findAll").then(function(response){this.uList=response.data;console.log(uList);... 继续阅读 >
2020
10-09

Vue基于iview table展示图片实现点击放大

首先先安装依赖：npminstallv-viewer--save然后全局引入，我这边是在main.js里面操作写的：importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'然后注册下：Vue.use(Viewer)Viewer.setDefaults({Options:{'inline':true,'button':true,'navbar':true,'title':true,'toolbar':true,'tooltip':true,'movable':true,'zoomable':true,'rotatable':true,'scalable':true,'transition':true,'... 继续阅读 >
2020
10-08

vue+elementui实现点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件查看位置：elementui的table事件elementui的table中怎样点击某个单元格触发事件？可以先看一下官网中table的自定义列模板代码<template><el-table:data="tableData"borderstyle="width:100%"><el-table-columnlabel="日期"width="180"><templatescope="scope"><el-iconname="time"></el-icon><spanstyle="margin-left:10px">{{scope.row.date}}</span></temp... 继续阅读 >
2020
10-08

vue element table中自定义一些input的验证操作

vue element table中自定义一些input的验证操作 官网原话Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。表单el-form表单必备以下三个属性：:model="ruleForm"绑定的数据内容:rules="rules"动态绑定的rules，表单验证规则ref="ruleForm"绑定的对象template模块其实问题关键就在于如何给el-form-item动态绑定prop:prop="'tableData.'+scope.$index+'.字段名'"<template><divclass="Tes... 继续阅读 >
2020
10-08

使用element-ui +Vue 解决 table 里包含表单验证的问题

应用场景：在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：这个校验中，最关键的问题在于如何给el-form-item动态绑定prop。:prop="'tableData.'+scope.$index+'.字段名'"方法一：<template><divclass="app-container"><el-form:model="fromData"ref="from"><el-table:data="fromData.domains"><el-table-columnlabel="姓名"><template... 继续阅读 >
2020
10-01

Bootstrap table 服务器端分页功能实现方法示例

本文实例讲述了Bootstraptable服务器端分页功能实现方法。分享给大家供大家参考，具体如下：bootstrap版本为3.Xbootstrap-table.min.cssbootstrap-table-zh-CN.min.jsbootstrap-table.min.js前端bootstrap+jQuery，服务端使用springMVC实现restful风格服务前端代码块<tableid="test-table"class="col-xs-12"data-toolbar="#toolbar">functioninitTable(){$('#test-table').bootstrapTable({method:'get',toolb... 继续阅读 >
2020
09-29

vue+Element中table表格实现可编辑（select下拉框）

vue+Element中table表格实现可编辑（select下拉框） 最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下：HTML代码：1.在处理人列加入一个下拉框模板，其中v-model必须... 继续阅读 >
2020
09-29

基于JS实现table导出Excel并保留样式

基于JS实现table导出Excel并保留样式 浏览器环境：谷歌浏览器1.在导出Excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式：行内添加样式<td>公司一</td>效果：完整代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>tabletd{font-size:12px;width:200px;height:30px;text-align:center;background-color:#4f89... 继续阅读 >
2020
09-25

解决Django no such table: django_session的问题

解决Django no such table: django_session的问题 操作系统：Win7IDE：PyCharm4.5.3Django：1.10.1报错代码：request.session['key']=value描述：今天第一次使用Django中的session，只要出现"session['key']"就会报错。解决方法：1.进入cmd，通过cd命令进入到项目根目录下，即manage.py文件所在的文件夹。2.看一下Django的版本号(我的是1.10.1)，1.9之后的执行'pythonmanage.pymigrate'命令(我用的这个命令)，1.9之前的执行'pythonmanage.pysyscdb'命令(baidu的时候看到的... 继续阅读 >
2020
09-25

VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新） 一、问题用elementUi横着增加一行数据没毛病，可以操作添加一列，这新增的这一列，第一次去赋值的时候值是改了，但没生效点击下一行时值就变过来二、原因横向添加是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加的数据，因为没有事先在el-selectv-modle=""里面定义好字段，定义好的option是通过v-for出来的(option是写死的就不会有这个问题)，就会出现选择后，select元素上无法展... 继续阅读 >
2020
09-23

element-ui table行点击获取行索引（index）并利用索引更换行顺序

element-ui table行点击获取行索引（index）并利用索引更换行顺序 1)将每一行的索引插入操作行中，即为每一行数据添加一个属性index使用el-table已经给处的方法：tableRowClassNamehtml中：<el-table:row-class-name="tableRowClassName"></el-table>js中：只需放入methods中即可，el-table会自动触发(不知道为什么贴源码不行啊)点击进行事件操作：在el-table-column中加入slot,可以拿到当前点击列所属的行，并完成对其重新排列js中：到此这篇关于element-uitable行点击获取行索引（index）并利... 继续阅读 >
2020
09-23

基于jQuery获取table数据发送到后端

1.我做的是一个动态表格，就是在输入框里每输入一次数据并点击“添加”按钮，表格中就会新增一行记录。<tableid="stu_prize_tab"class="stu_prize_tab"border="1pxsolid"cellspacing="0"cellpadding="0"><captionclass="prize_title">获奖记录表</caption><tr><th>编号</th><th>奖项名称</th><th>获奖年份</th><th>操作</th... 继续阅读 >