前言
重新温习vue，练手的一个功能。不多说，自己研究。
演示
扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
div {
padding: 0px;
margin: 30px;
}
[v-clock] {
display: none;
}
</style>
<body>
<div id="app">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<!-- 用户注册信息 -->
<td colspan="2" align="center">{
{orderCategories.message}}</td>
</tr>
<tr>
<!-- 用户名 -->
<td>{
{orderCategories.userName}}</td>
<td>
<input type="text" id="user" v-model="orderTemplate.userName" />
</td>
</tr>
<tr>
<!-- 密码 -->
<td>{
{orderCategories.passWord}}</td>
<td>
<input type="password" id="password" v-model="orderTemplate.passWord" />
</td>
</tr>
<tr>
<!-- 电话号码 -->
<td>{
{orderCategories.telNumber}}</td>
<td>
<input type="text" id="telNumber" v-model="orderTemplate.telNumber" />
</td>
</tr>
<tr>
<!-- 业务 -->
<td>{
{orderCategories.business}}</td>
<td>
<template v-for="(item,index) in businessCategory.businessList">
<input type="radio" :name="item.name" :value="item.business" v-model="orderTemplate.business" />
<label :for="item.business">{
{item.business}}</label>
</template>
</td>
</tr>
<tr>
<!-- 籍贯 -->
<td>{
{orderCategories.nativePlace}}</td>
<td>
<select v-model="cityCategory.citys" @change="changeProduct($event)">
<option v-for="(item,index) in cityCategory.cityList" :value="item.id" :key="index">{
{item.city}}</option>
</select>
</td>
</tr>
<tr>
<!-- 兴趣 -->
<td>{
{orderCategories.interests}}</td>
<td>
<template v-for="(item,index) in interestCategory.interestList">
<input type="checkbox" :name="item.name" :value="item.interest" ref="interestChecks" v-model="item.check" />
<label :for="item.interest">{
{item.interest}}</label>
</template>
</td>
</tr>
<tr>
<!-- 政治面貌 -->
<td>{
{orderCategories.politicsFace}} </td>
<td>
<template v-for="(item,index) in identityCategory.identityList">
<input type="radio" :name="item.name" :value="item.identity" v-model="orderTemplate.politicsFace" />
<label :for="item.identity">{
{item.identity}}</label>
</template>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" v-show="flag" value="提交" @click="submit" id="submit" />
<input type="button" v-show="!flag" value="修正" @click="modifyIndex" id="modifyIndex" />
<input type="button" value="重置" @click="reset" id="reset" />
<input type="button" v-show="!flag" value="取消修正" @click="cancelModifyIndex" id="cancelModifyIndex" />
</td>
</tr>
</table>
<input type="hidden" :value="userId">
<br /><br />
</div>
<orders></orders>
<div id="app2">
<template id="order">
<input type="hidden" v-bind:orderHandlesProps="orderHandles" v-bind:orderCategoriesProps="orderCategories" v-bind:orderDetailedProps="orderDetailed"/>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="checkbox" id="all" v-model="orderHandles.checked" @change="checkAll" />
<!-- 全选 -->
<label for="all">{
{orderHandles.selectAll}}</label>
</td>
<td colspan="6" align="center">
<input type="button" :disabled="someDisabled" :value="orderHandles.delRowButton" @click="delRow" />
</td>
</tr>
<tr>
<!-- 选中 -->
<th>
{
{orderHandles.select}}
</th>
<!-- 用户名 -->
<th>{
{orderCategories.userName}}</th>
<!-- 密码 -->
<th>{
{orderCategories.passWord}}</th>
<!-- 电话号码 -->
<th>{
{orderCategories.telNumber}}</th>
<!-- 业务 -->
<th>{
{orderCategories.business}}</th>
<!-- 籍贯 -->
<th>{
{orderCategories.nativePlace}}</th>
<!-- 兴趣 -->
<th>{
{orderCategories.interests}}</th>
<!-- 政治面貌 -->
<th>{
{orderCategories.politicsFace}}</th>
<!-- 操作 -->
<th>{
{orderHandles.caoZuo}}</th>
</tr>
<template v-for="(item,index) in orderDetailed">
<tr>
<td>
<input type="checkbox" v-model="item.checkModel" :id="['order-'+index]" :key="item.index" @change="checkBox(item)" />
</td>
<td>
{
{item.userName}}
</td>
<td>
{
{item.passWord}}
</td>
<td>
{
{item.telNumber}}
</td>
<td>
{
{item.business}}
</td>
<td>
{
{item.nativePlace}}
</td>
<td>
{
{item.interests}}
</td>
<td>
{
{item.politicsFace}}
</td>
<td>
<input type="button" :disabled="someDisabled" :value="orderHandles.delButton" @click="del(index)" />
<input type="button" :value="orderHandles.updateButton" @click="modify(index)" />
</td>
</tr>
</template>
</table>
</template>
</div>
</body>
<script>
// 订单类别
var orderCategory = {
message: '用户注册信息',
userName: '用户名',
passWord: '密码',
nativePlace: '籍贯',
interests: '兴趣',
politicsFace: '政治面貌',
telNumber: '电话号码',
business: '业务'
}
// 订单操作
var orderHandle = {
// 选中的集合
checkedList: [],
selectAll: '全选',
delRowButton: '选中删除',
delButton: '删除',
updateButton: '修改',
select: '选中',
caoZuo: '操作',
// 全选/反选
checked: false
}
// 订单详细
var orderDetailed = [{
userName: '007',
passWord: '1234567',
telNumber: '080111111111',
business: 'vip',
nativePlace: '浙江',
interests: '书法,绘画,瑜伽',
politicsFace: '团员'
}]
// 订单
var orderTemplate = {
userName: '',
passWord: '',
telNumber: '',
business: '',
nativePlace: '',
interests: '',
politicsFace: ''
}
// 城市类别
var cityCategory = {
citys: '0',
cityList: [{
id: 0,
city: '请选择'
},
{
id: 1,
city: '浙江'
},
{
id: 2,
city: '上海'
},
{
id: 3,
city: '重庆'
},
{
id: 4,
city: '北京'
}
]
}
// 兴趣类别
var interestCategory = {
interestList: [{
interest: '篮球',
name: 'basketball',
check:false
},
{
interest: '足球',
name: 'football',
check:false
},
{
interest: '书法',
name: 'calligraphy',
check:false
},
{
interest: '音乐',
name: 'music',
check:false
},
{
interest: '绘画',
name: 'painting',
check:false
},
{
interest: '散打',
name: 'Sanda',
check:false
},
{
interest: '瑜伽',
name: 'yoga',
check:false
},
{
interest: '其他',
name: 'other',
check:false
}
]
}
// 政治面貌类别
var identityCategory = {
identityList: [{
identity: '党员',
name: 'dangYuan'
},
{
identity: '团员',
name: 'tuanYuan'
},
{
identity: '群众',
name: 'qunZhong'
}
]
}
// 业务类别
var businessCategory = {
businessList: [{
name: 'ordinary',
business: '平民'
},
{
name: 'vip',
business: 'vip'
},
{
name: 'svip',
business: 'svip'
}
]
}
var app = new Vue({
el: '#app',
data: {
// 订单类别
orderCategories: orderCategory,
// 城市类别
cityCategory: cityCategory,
// 兴趣类别
interestCategory: interestCategory,
// 政治面貌类别
identityCategory: identityCategory,
// 业务类别
businessCategory: businessCategory,
// 订单详细
orderDetailed: orderDetailed,
// 用户填写的订单
orderTemplate: orderTemplate,
flag:true,
// 需要修正的用户id
userId:''
},
methods: {
// 提交
submit() {
// 存放选中的业务
var interestsArr = []
var interestCheckList = this.$refs.interestChecks
for(var i = 0; i < interestCheckList.length; i++) {
if(interestCheckList[i].checked) {
interestsArr.push(interestCheckList[i].value)
}
}
var orderInterestsArr = interestsArr
this.orderTemplate.interests = orderInterestsArr.join(',')
var order = {
userName: this.orderTemplate.userName,
passWord: this.orderTemplate.passWord,
telNumber: this.orderTemplate.telNumber,
business: this.orderTemplate.business,
nativePlace: this.orderTemplate.nativePlace,
interests: this.orderTemplate.interests,
politicsFace: this.orderTemplate.politicsFace
}
this.orderDetailed.push(order)
app.reset()
alert("提交成功！")
},
// 重置
reset() {
this.orderTemplate.userName = ''
this.orderTemplate.passWord = ''
this.orderTemplate.telNumber = ''
this.orderTemplate.business = ''
this.orderTemplate.politicsFace = ''
this.cityCategory.citys = '0'
var interestCheckList = this.$refs.interestChecks
for(var i = 0; i < interestCheckList.length; i++) {
interestCheckList[i].checked = false
}
this.interestCategory.interestList.forEach(item => {
item.check =false;
})
// 变更按钮状态
app.flag = true
},
changeProduct(event) {
var index = event.target.value;
this.orderTemplate.nativePlace = cityCategory.cityList[index].city; //获取option对应的value值
},
modifyIndex(){
// 要修改的用户
var index=this.userId
// 修改的数据替换为提交的数据
var interestsArr = []
var interestCheckList = this.$refs.interestChecks
for(var i = 0; i < interestCheckList.length; i++) {
if(interestCheckList[i].checked) {
interestsArr.push(interestCheckList[i].value)
}
}
var cityId = this.cityCategory.citys
var orderInterestsArr = interestsArr
this.orderTemplate.interests = orderInterestsArr.join(',')
this.orderDetailed[index].userName = this.orderTemplate.userName,
this.orderDetailed[index].passWord = this.orderTemplate.passWord,
this.orderDetailed[index].telNumber = this.orderTemplate.telNumber,
this.orderDetailed[index].business = this.orderTemplate.business,
this.orderDetailed[index].politicsFace = this.orderTemplate.politicsFace,
this.orderDetailed[index].nativePlace = this.cityCategory.cityList[cityId].city,
this.orderDetailed[index].interests = this.orderTemplate.interests
// 变更按钮状态
app.flag = true
// 修改成功，清空表提交的数据
app.reset();
// 删除按钮活性
app2.someDisabled = false
alert('修正成功！')
},
// 取消修正
cancelModifyIndex() {
// 删除按钮活性
app2.someDisabled = false
console.log(app2.someDisabled)
// 提交按钮活性
flag = true
// 重置
app.reset();
alert('取消修正成功！')
},
}
});
var app2 = new Vue({
el: "#app2",
data: {
// 订单类别
orderCategories: orderCategory,
// 订单操作
orderHandles: orderHandle,
// 订单详细
orderDetailed: orderDetailed,
// 删除按钮非活性
someDisabled : false,
// 选中多选框默认不选中
isChecked : false
},
methods: {
// 全选
checkAll() {
var vm = this
if(vm.orderHandles.checked) {
vm.orderDetailed.forEach((item) => {
item.checkModel = true
})
} else {
vm.orderDetailed.forEach((item) => {
item.checkModel = false
})
}
},
checkBox(item) {
// 1.获取总复选框数量
// 2.循环遍历选中的总数大于等于list
if(this.orderDetailed.every(item => item.checkModel)) {
// 3.全选按钮选中
this.orderHandles.checked = true
} else {
// 4.全选按钮不选中
this.orderHandles.checked = false
}
},
// 多个删除
delRow() {
// 如果一个删除的订单都没有的场合
if(!app2.select()){
// 提示没有可删除的订单
alert('没有可删除的订单，请重试！');
}else{
// 不处理
}
},
// 单个删除
del(id) {
this.orderDetailed.splice(id, 1)
},
// 修改回显
modify(index) {
// 重置
app.reset();
// 赋值
orderTemplate.userName = orderDetailed[index].userName
orderTemplate.passWord = orderDetailed[index].passWord,
orderTemplate.telNumber = orderDetailed[index].telNumber,
orderTemplate.business = orderDetailed[index].business,
orderTemplate.politicsFace = orderDetailed[index].politicsFace
var natives = orderDetailed[index].nativePlace
cityCategory.cityList.forEach(item => {
if(item.city == natives) {
cityCategory.citys = item.id
} else {
}
})
// 获取要修正的兴趣
var arr= orderDetailed[index].interests.split(",")
interestCategory.interestList.forEach(item => {
if(arr.filter(_item=> _item === item.interest).length>0){
item.check =true;
}else{
}
});
// 变更按钮状态
app.flag = false
// 传递修正的第几条数据
app.userId = index
// 删除非活性
this.someDisabled = true
},
// 复选框是否选中
select() {
var flg = false
for(var i=0;i<this.orderDetailed.length;i++){
if(this.orderDetailed[i].checkModel === true){
// 删除对应订单
this.orderDetailed.splice(i, 1)
flg = true
}else{
// 不处理
}
}
return flg;
}
},
components: {
props: {
// 检查类型
orderCategoriesProps: Object,
orderHandlesProps: Object,
orderDetailedProps: Object
},
orders: {
template: '#order'
},
methods: {
}
},
watch: {
// 当全选按钮选中后，提交或者修改新的订单数据
// 全选按钮监听到数组变化，自动取消全选选中
orderDetailed: {
handler: function(val, oldVal) {
// 初始化复选框未选择的场合，或者状态变更后的复选框未选中
var arr = []
oldVal.forEach(item =>{
if(typeof item.checkModel === "undefined" || item.checkModel === false){
// 没有选中的复选框计数
arr.push(item.checkModel)
}else{
// 不处理
}
});
//当新选中的选择框的总个数等于后台全部数据时，全选框选中，否则不选
// 并且有选中的复选框
if (val.length === this.orderDetailed.length && arr.length <= 0) {
// 全选框选中
this.orderHandles.checked = true;
} else {
// 全选框不选中
this.orderHandles.checked = false;
}
},
deep: true
},
}
})
</script>
</html>