vue2.x+elelmentUI@3.5 表格
<template>
<section>
<el-row>
<el-col :span="16">
<!--表单-->
<h3>{{setedList.length}}</h3>
<table cellspacing="0" style="width:100%;" class="table-my">
<thead>
<tr>
<th>
<el-checkbox v-model="checkedAll" @change="handleCheckedAll">序号</el-checkbox>
</th>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,number) in tableData" :key="number" :class="{checked:item.checked}">
<td>
<el-checkbox v-model="item.checked" @change="handleChecked(item)">
{{number+1}}
</el-checkbox> </td>
<td>{{item.date}}</td>
<td>{{item.name}}</td>
<td>{{item.address}}</td>
</tr> </tbody>
</table> <div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="5" layout="prev, pager, next, jumper" :total="17">
</el-pagination>
</div>
</el-col>
<el-col :span="8">
<ul style="background:#eee;">
<!-- <li v-for="(e,i) in setedList" :key="i"></li> -->
<li v-for="(e,i) in setedList" :key="i" style="heighet:90px;background:skyblue;border:1px solid red">
<p>{{i+1}}</p>
<p style="padding:5px;"><input type="text" v-model="e.name" style="padding:5px;"></p>
<p style="padding:5px;"><input type="text" v-model="e.address" style="padding:5px;"></p>
<p style="padding:5px;"><input type="text" v-model="e.date" style="padding:5px;"></p>
</li>
</ul>
</el-col>
</el-row>
</section>
</template>
<script type="text/ecmascript-6">
const ERR_OK = "000";
export default {
data() {
return {
checkedAll: false,
checked: false,
formInline: {
user: {
name: '',
date: '',
address: [],
place: ''
}
},
tableData: [],
options: [],
places: [],
dialogFormVisible: false,
editLoading: false,
form: {
name: '',
address: '',
date: '',
},
currentPage: 1,
table_index: 999,
setedList: [],
list: []
};
},
created() {
this.$http.get('/api/getTable').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
// this.tableData = response.datas;
var datas = response.datas; for (var index = 0; index < datas.length; index++) { datas[index].checked = false;
// console.log(datas[index].checked)
}
this.tableData = datas; }
});
this.$http.get('/api/getOptions').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
this.options = response.datas;
this.places = response.places;
}
});
},
methods: { handleCheckedAll() {//-----------全选
var temp = []
if (this.checkedAll) {
this.list = [];
for (var i = 0; i < this.tableData.length; i++) {
this.tableData[i].checked = true;
temp.push(this.tableData[i]);
}
this.list = temp;
for (var j = 0; j < temp.length; j++) {
for (var k = 0; k < this.setedList.length; k++) {
if (temp[j].name == this.setedList[k].name) {
temp.splice(j, 1)
}
} }
for (var l = 0; l < temp.length; l++) {
this.setedList.push(temp[l]);
} } else {
this.list = [];
for (var i = 0; i < this.tableData.length; i++) {
this.tableData[i].checked = false;
temp.push(this.tableData[i]);
}
for (var j = 0; j < temp.length; j++) {
for (var k = 0; k < this.setedList.length; k++) {
if (temp[j].name == this.setedList[k].name) {
this.setedList.splice(k, 1)
}
} }
} },
handleChecked(item) {//单选--------------
if (item.checked) {
item.checked = true;
this.setedList.push(item);
} else {
item.checked = false;
if (this.list.length < 2) {
this.list = [];
for (var j = 0; j < this.setedList.length; j++) {
if (item.name == this.setedList[j].name) {
this.setedList.splice(j, 1)
}
} } else { for (var j = 0; j < this.setedList.length; j++) {
if (item.name == this.setedList[j].name) {
this.setedList.splice(j, 1)
}
} }
} },
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`当前页: ${val}`);
this.checkedAll = false;
console.log(this.list);
this.$http.get('/api/getTable').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
var datas = response.datas;
for (var index = 0; index < datas.length; index++) { datas[index].checked = false; }
this.tableData = datas; }
});
}, }
};
</script>
<style lang="less" scoped>
.table-my {
border-collapse: collapse;
margin: 0 auto;
width: 500px;
th,
td {
padding: 0;
border: 1px solid #c0c4cc;
font: 20px/50px "微软雅黑";
text-align: center;
}
.checked{
background: skyblue;
}
}
</style>
<template>
<section>
<el-row>
<el-col:span="">
<!--表单-->
<h3>{{setedList.length}}</h3>
<tablecellspacing=""style="width:100%;"class="table-my">
<thead>
<tr>
<th>
<el-checkboxv-model="checkedAll"@change="handleCheckedAll">序号</el-checkbox>
</th>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<trv-for="(item,number) intableData":key="number":class="{checked:item.checked}">
<td>
<el-checkboxv-model="item.checked"@change="handleChecked(item)">
{{number+}}
</el-checkbox>
</td>
<td>{{item.date}}</td>
<td>{{item.name}}</td>
<td>{{item.address}}</td>
</tr>
</tbody>
</table>
<divclass="block">
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-size=""layout="prev, pager, next, jumper":total="">
</el-pagination>
</div>
</el-col>
<el-col:span="">
<ulstyle="background:#eee;">
<!-- <li v-for="(e,i) in setedList" :key="i"></li> -->
<liv-for="(e,i) insetedList":key="i"style="heighet:90px;background:skyblue;border:1px solid red">
<p>{{i+}}</p>
<pstyle="padding:5px;"><inputtype="text"v-model="e.name"style="padding:5px;"></p>
<pstyle="padding:5px;"><inputtype="text"v-model="e.address"style="padding:5px;"></p>
<pstyle="padding:5px;"><inputtype="text"v-model="e.date"style="padding:5px;"></p>
</li>
</ul>
</el-col>
</el-row>
</section>
</template>
<script type="text/ecmascript-6">
const ERR_OK = "";
export default {
data() {
return {
checkedAll: false,
checked: false,
formInline: {
user: {
name: '',
date: '',
address: [],
place: ''
}
},
tableData: [],
options: [],
places: [],
dialogFormVisible: false,
editLoading: false,
form: {
name: '',
address: '',
date: '',
},
currentPage: ,
table_index: ,
setedList: [],
list: []
};
},
created() {
this.$http.get('/api/getTable').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
// this.tableData = response.datas;
var datas = response.datas;
for (var index = ; index < datas.length; index++) {
datas[index].checked = false;
// console.log(datas[index].checked)
}
this.tableData = datas;
}
});
this.$http.get('/api/getOptions').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
this.options = response.datas;
this.places = response.places;
}
});
},
methods: {
handleCheckedAll() {//-----------全选
var temp = []
if (this.checkedAll) {
this.list = [];
for (var i = ; i < this.tableData.length; i++) {
this.tableData[i].checked = true;
temp.push(this.tableData[i]);
}
this.list = temp;
for (var j = ; j < temp.length; j++) {
for (var k = ; k < this.setedList.length; k++) {
if (temp[j].name == this.setedList[k].name) {
temp.splice(j, )
}
}
}
for (var l = ; l < temp.length; l++) {
this.setedList.push(temp[l]);
}
} else {
this.list = [];
for (var i = ; i < this.tableData.length; i++) {
this.tableData[i].checked = false;
temp.push(this.tableData[i]);
}
for (var j = ; j < temp.length; j++) {
for (var k = ; k < this.setedList.length; k++) {
if (temp[j].name == this.setedList[k].name) {
this.setedList.splice(k, )
}
}
}
}
},
handleChecked(item) {//单选--------------
if (item.checked) {
item.checked = true;
this.setedList.push(item);
} else {
item.checked = false;
if (this.list.length < ) {
this.list = [];
for (var j = ; j < this.setedList.length; j++) {
if (item.name == this.setedList[j].name) {
this.setedList.splice(j, )
}
}
} else {
for (var j = ; j < this.setedList.length; j++) {
if (item.name == this.setedList[j].name) {
this.setedList.splice(j, )
}
}
}
}
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`当前页: ${val}`);
this.checkedAll = false;
console.log(this.list);
this.$http.get('/api/getTable').then((response) => {
response = response.data;
if (response.code === ERR_OK) {
var datas = response.datas;
for (var index = ; index < datas.length; index++) {
datas[index].checked = false;
}
this.tableData = datas;
}
});
},
}
};
</script>
<style lang="less" scoped>
.table-my {
border-collapse: collapse;
margin: auto;
width: 500px;
th,
td {
padding: ;
border: 1px solid #c0c4cc;
font: 20px/50px "微软雅黑";
text-align: center;
}
.checked{
background: skyblue;
}
}
</style>
vue2.x+elelmentUI@3.5 表格的更多相关文章
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- 《Vue2.0 实践揭秘》终于出版啦！
不知不觉间在园子开博都两年多了,最近一些园友问最近去哪了为何都没有新的文章了.最近确实发生了很多的事,一是忙工作二就是忙着写书.这还得多些园子的小编,自两年前发表的"架构师修炼"系 ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- Vue2.0---将页面中表格数据导出excel
这不是教程,是随笔. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0 导出Excel表格数据
1.安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader 2.在项目中创建一个文件夹(比 ...
- Vue2.0 + ElementUI的+ PageHelper实现的表格分页
参考博客:http://blog.csdn.net/u012907049/article/details/70237457 借鉴1.controller层编写 2.vue中,axios的写法(总页数等 ...
- Vue2.0+ElementUI实现表格翻页的实例
参考地址: https://www.cnblogs.com/zhouyifeng/p/7706815.html
随机推荐
- Spring Boot 学习填的坑一
1.关于springBoot自动扫描规则: SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! "Application"类是指 ...
- Linux上编辑然后执行一段脚本的机制
简要分析下刚开始提出的第二个问题, 因为没看代码,所以只是简单流程 1. 在bash里打开vim编辑文件并保存退出: bash进程fork子进程, 然后调用exec装入vim程序,wait这个子进程v ...
- bzoj3732 Network（NOIP2013 货车运输）
Description 给你N个点的无向图 (1 <= N <= 15,000),记为:1…N. 图中有M条边 (1 <= M <= 30,000) ,第j条边的长度为: d_ ...
- CDH5.13.1安装
文件下载 Cloudera Manager 地址:http://archive.cloudera.com/cm5/cm/5/ 这里下载的是5.13.1的版本,https://archive.cloud ...
- Selenium-Switch与SelectApi接口
Switch 我们在UI自动化测试时,总会出现新建一个tab页面.弹出一个浏览器级别的弹框或者是出现一个iframe标签,这时我们用WebDriver提供的Api接口就无法处理这些情况了.需要用到Se ...
- 笔记：字体大小的几种不同的格式px，em，rem
px px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 譬如,Windows的用户所使用的分辨率一般是96像素/英寸. 而MAC的用户所使用的分辨 ...
- spring+springMVC+Mybatis架构下采用AbstractRoutingDataSource、atomikos、JTA实现多数据源灵活切换以及分布式事务管理
背景: 1.系统采用SSM架构.需要在10多个MYSQL数据库之间进行切换并对数据进行操作,上篇博文<springMVC+Mybatis(使用AbstractRoutingDataSource实 ...
- SpringBoot @Transactional的rollbackFor属性
1.简单回顾Java Exception 该图摘自:https://blog.csdn.net/zhangerqing/article/details/8248186 一方面,我们可以将异常分为运行时 ...
- 阿里开源！轻量级深度学习端侧推理引擎 MNN
阿里妹导读:近日,阿里正式开源轻量级深度学习端侧推理引擎“MNN”. AI科学家贾扬清如此评价道:“与 Tensorflow.Caffe2 等同时覆盖训练和推理的通用框架相比,MNN 更注重在推理时的 ...
- linux centos 一键安装环境
phpStudy for Linux 支持Apache/Nginx/Tengine/Lighttpd, 支持php5.2/5.3/5.4/5.5切换 已经在centos-6.5,debian-7.4. ...