vue2.x+elelmentUI@3.5 表格
程序员文章站
2022-06-28 18:49:44
{{setedList.length}}
<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="16">
<!--表单-->
<h3>{{setedList.length}}</h3>
<tablecellspacing="0"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+1}}
</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="5"layout="prev, pager, next, jumper":total="17">
</el-pagination>
</div>
</el-col>
<el-col:span="8">
<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+1}}</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 = "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>
上一篇: Jenkins上同一工程改名后不能更新到最新代码的问题
下一篇: HTML 链接