精华内容
下载资源
问答
  • vue修改多选框回显
    2020-05-12 20:45:01

    代码

    <template>
    	<div class="about">
    
    
    		<el-row>
    			<el-col :span="16">
    				<!-- 搜索框的界面 -->
    				<el-form :inline="true" :model="searchFormModel">
    					<el-form-item label="请输入商品名称">
    						<el-input v-model="searchFormModel.mohu" placeholder="商品名称"></el-input>
    					</el-form-item>
    					<el-form-item label="请输入价格">
    						<el-input v-model="searchFormModel.start" placeholder="价格"></el-input>
    					</el-form-item>
    					<el-form-item>
    						<el-input v-model="searchFormModel.end" placeholder="价格"></el-input>
    					</el-form-item>
    
    
    
    					<el-form-item>
    						<el-button type="danger" icon="el-icon-search" @click="searchDate">查询</el-button>
    
    					</el-form-item>
    
    				</el-form>
    
    			</el-col>
    			<el-col :span="5">
    				<el-button type="success" icon="el-icon-search" @click="roleDialog=true">添加</el-button>
    				<el-button type="success" icon="el-icon-search" @click="del">批删</el-button>
     
    			</el-col>
    		</el-row>
    
    
    
    
    
    
    
    
    		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    
    			<!--全选配置-->
    			<el-table-column type="selection"></el-table-column>
    			
    			<el-table-column prop="id" label="ID" width="180">
    			</el-table-column>
    			<el-table-column prop="name" label="名称" width="180">
    			</el-table-column>
    			<el-table-column label="图片">
    				<template slot-scope="scope">
    					<el-avatar :src="scope.row.pic"></el-avatar>
    				</template>
    			</el-table-column>
    			<el-table-column prop="price" label="日期" width="180">
    			</el-table-column>
    			<!--省市县-->
    			<el-table-column label="产地">
    				<template slot-scope="scope">
    					{{scope.row.provinceName.name}}-{{scope.row.cityName.name}}-{{scope.row.countyName.name}}
    				</template>
    			</el-table-column>
    			<el-table-column label="传销">
    				<template slot-scope="scope">
    					<template v-for="ch in scope.row.chuanList">
    						{{ch.name}}
    					</template>
    				</template>
    			</el-table-column>
    
    			<el-table-column prop="created" label="创建时间">
    			</el-table-column>
    			
    			
    			<!-- 操作 -->
    			<el-table-column label="操作" width="300">
    				<template slot-scope="scope">
    			
    					<el-button type="danger" size="small" @click="doUpdate(scope.row)">修改</el-button>
    					<el-button type="success" size="small" @click="chaStudent(scope.row)">查看</el-button>
    				</template>
    			
    			</el-table-column>
    
    		</el-table>
    
    
    
    
    		<!-- 分页 -->
    		<el-row>
    			<el-col :span="24">
    				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="current"
    				 :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" background>
    				</el-pagination>
    			</el-col>
    		</el-row>
    
    
    
    
    		<!-- 添加的对话框 -->
    		<el-dialog :visible.sync="roleDialog" title="添加商品" width="60%" center>
    			<el-form :inline="true" :model="insertFormModel" label-width="80px">
    				<el-form-item label="名称" prop="name">
    					<el-input v-model="insertFormModel.name" placeholder="名称"></el-input>
    				</el-form-item><br />
    
    				<el-form-item label="图片">
    					<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
    					<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
    					<el-upload class="avatar-uploader" :show-file-list="false" name="file" action="http://localhost:8100/api/shop/upload"
    					 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
    						<!--img 是用来显示上传图片的本地效果-->
    						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
    						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
    					</el-upload>
    
    				</el-form-item><br />
    
    
    
    				<el-form-item label="价格" prop="price">
    					<el-input v-model="insertFormModel.price" placeholder="价格"></el-input>
    				</el-form-item><br />
    
    
    				<el-form-item label="产地">
    					<el-cascader v-model="value" :options="nations" :props="props" @change="flushpc">
    					</el-cascader>
    				</el-form-item><br />
    
    
    
    				<el-checkbox-group label="促销" v-model="checkedShop" @change="handleCheckedShopChange">
    					<!--遍历角色{{role.nameZh}}名称    :label是value值-->
    					<el-checkbox v-for="role in treeDate" :label="role.id">{{role.name}}</el-checkbox>
    				</el-checkbox-group><br />
    
    
    
    
    
    				<el-form-item>
    					<el-button type="danger" @click="addsaveRole">添加</el-button>
    					<el-button @click="roleDialog= false">取 消</el-button>
    				</el-form-item>
    
    			</el-form>
    
    
    		</el-dialog>
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		<el-dialog :visible.sync="updateModel" title="修改商品" width="60%" center>
    			<el-form :inline="true" :model="updateFormModel" label-width="80px">
    				<el-form-item label="名称" prop="name">
    					<el-input v-model="updateFormModel.name" placeholder="名称"></el-input>
    				</el-form-item><br />
    		
    				<el-form-item label="图片">
    					<!--action 上传的地址  name的名称默认是file 就是上传到控制层的参数名称-->
    					<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
    					<el-upload class="avatar-uploader" :show-file-list="false" name="file" action="http://localhost:8100/api/shop/upload"
    					 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
    						<!--img 是用来显示上传图片的本地效果-->
    						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
    						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
    					</el-upload>
    		
    				</el-form-item><br />
    		
    		
    		
    				<el-form-item label="价格" prop="price">
    					<el-input v-model="updateFormModel.price" placeholder="价格"></el-input>
    				</el-form-item><br />
    		
    		
    				<el-form-item label="产地">
    					<el-cascader v-model="value" :options="nations" :props="props" @change="flushpc">
    					</el-cascader>
    				</el-form-item><br />
    		
    		
    		
    				<el-checkbox-group label="促销" v-model="checkedShop" @change="handleCheckedShopChange">
    					
    					<el-checkbox v-for="role in treeDate" :label="role.id">{{role.name}}</el-checkbox>
    				</el-checkbox-group><br />
    		
    		
    		
    		
    		
    				<el-form-item>
    					<el-button type="danger" @click="updateShop">修改</el-button>
    					<el-button @click="updateModel= false">取 消</el-button>
    				</el-form-item>
    		
    			</el-form>
    		
    		
    		</el-dialog>
    		
    		
    		
    		
    
    
    		<el-dialog :visible.sync="xiangqing" title="商品详情" width="80%" center>
    			 <el-row v-for="data in tableData1" >
    				<hr />
    				<el-container>
    					<el-aside width="200px">
    						<el-image :src="data.pic"></el-image>
    					</el-aside>
    					<el-container>
    						<el-main>
    							<span>
    								<h3>名称:{{data.name}}</h3>
    							</span> <br>
    							<span style="color: red;">
    								<h4>价格:¥{{data.price}}</h4>
    							</span><br>
    
    							<span>产地:{{data.provinceName.name}}-{{data.cityName.name}}-{{data.countyName.name}}</span><br>
    							
    							<span>
    								促销:
    								<template v-for="ch in data.chuanList">
    									{{ch.name}}
    								</template>
    							</span><br>
    								
    							
    							
    							
    						</el-main>
    					</el-container>
    				</el-container>
    			</el-row> 
    			
    			
    		
    		</el-dialog>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    	</div>
    </template>
    <script>
    	export default {
    		data() {
    
    			return {
    				checkedCities: [],
    				total: 0,
    				size: 3,
    				sizes: [3, 5, 8],
    				current: 1,
    				tableData: [],
    				tableData1: [],
    				value: [],
    				options: [],
    				props: {
    					value: 'id',
    					label: 'name',
    					children: 'list',
    				},
    
    				imageUrl: '', //上传的头像路径
    
    
    				check: [],
    
    				searchFormModel: {
    					mohu: '',
    					start: '',
    					end: '',
    				},
    				roleDialog: false,
    				insertFormModel: {
    					name: '',
    					pic: '',
    					price: '',
    					province: '',
    					city: '',
    					county: '',
    
    
    
    				},
    				treeDate: [],
    				nations:[],
    				checkedShop: [], 
    				updateModel:false,
    				updateFormModel:{
    					id:'',
    					name: '',
    					pic: '',
    					price: '',
    					province: '',
    					city: '',
    					county: '',
    					
    				},
    				xiangqing:false,
    
    
    
    
    
    
    
    			}
    		},
    		created() {
    			this.initData();
    			this.initCascader();
    			this.initTree();
    		},
    		methods: {
    			initTree() {
    				//查询数据
    				this.axios.get('http://localhost:8100/api/shop/tree').then((res) => {
    					//返回数据赋值
    					this.treeDate = res.data;
    
    					console.log(this.treeDate)
    				});
    			},
    			initCascader() {
    				this.axios.get('http://localhost:8100/api/shop/list1').then((res) => {
    					console.log(res.data);
    					this.nations = res.data;
    				})
    			},
    			initData() {
    				this.axios.get('http://localhost:8100/api/shop/list', {
    					params: {
    						pageNum: this.current,
    						pageSize: this.size,
    						name:this.searchFormModel.mohu,
    						start:this.searchFormModel.start,
    						end:this.searchFormModel.end 
    
    					}
    				}).then((res) => {
    					this.tableData = res.data.content;
    					this.total = res.data.totalElements;
    					console.log(this.tableData)
    				});
    			},
    			handleSizeChange(val) {
    				this.size = val;
    				this.initData();
    			},
    			handleCurrentChange(val) {
    				this.current = val;
    				this.initData();
    
    			},
    			
    			searchDate() {
    				this.current = 1;
    				this.initData();
    			},
    
    			flushpc(value) {
    				//判断是否是null ,是否是数组
    				if (value != null && Array.isArray(value)) {
    					if (this.roleDialog) {
    						this.insertFormModel.province = this.value[0];
    						this.insertFormModel.city = this.value[1];
    						this.insertFormModel.county = this.value[2];
    					}
    					 else if (this.updateModel) {
    						this.updateFormModel.province = this.value[0];
    						this.updateFormModel.city = this.value[1];
    						this.updateFormModel.county = this.value[2];
    					} 
    				}
    			},
    			handleAvatarSuccess(res, file) {
    				//判断上传的结果是否成功
    				if (res.code == 1001) {
    					if (this.roleDialog) {
    						//记录上传头的地址
    						this.insertFormModel.pic = res.data;
    					}  else if (this.updateModel) {
    						this.updateFormModel.pic = res.data;
    					} 
    					//本地回显的代码
    					this.imageUrl = URL.createObjectURL(file.raw);
    				} else {
    					alert("上传失败");
    				}
    			},
    			beforeAvatarUpload(file) {
    			},
    			handleCheckedShopChange(val) {
    				this.checkedShop = val;
    			},
    			addsaveRole(){
    				let cid = [];
    				for (let i in this.checkedShop) {
    					cid.push(this.checkedShop[i])
    				}
    				console.log("11111111111")
    				console.log(this.insertFormModel)
    				console.log(cid.join())
    				this.axios.post("http://localhost:8100/api/shop/add", this.insertFormModel, {
    					params: {
    						
    						cid: cid.join(),
    					}
    				}).then((res) => {
    					alert("添加成功");
    					this.roleDialog = false;
    					this.initData();
    				})
    				
    			},
    			doUpdate(row) {
    			
    				//还原三级联动
    				this.value = [];
    				//还原图片
    				this.imageUrl = '',
    				
    				Object.assign(this.updateFormModel, row);
    				
    				//图片回显
    				this.imageUrl = row.pic;
    				
    				
    				//判断省存在否
    				if (row.province != null) {
    					this.value.push(row.province);
    					this.value.push(row.city);
    					this.value.push(row.county);
    				}
    				
    				console.log("@@@@@")
    				console.log(row)
    				
    			
    				//初始化原有数据
    				this.checkedShop = [];
    				//用户本身的 角色数据
    				let cids = '';
    				
    				for(let j=0;j<row.chuanList.length;j++){
    					cids+=row.chuanList[j].id+",";
    				}
    				
    				
    				console.log(cids)
    				//判断
    				if (cids != null) {
    					//拆分数组
    					let array = cids.split(",");
    					//遍历数组
    					for (let i = 0; i < array.length; i++) {
    						//设疑
    						this.checkedShop.push(parseInt(array[i]));
    					}
    				}
    			
    			
    			
    			
    				//打开对话框
    				this.updateModel = true;
    			},
    			
    			updateShop(){
    				let cid = [];
    				for (let i in this.checkedShop) {
    					if(this.checkedShop[i]>0){
    						cid.push(this.checkedShop[i])
    					}
    					
    				}
    				
    				console.log("11111111111")
    				console.log(this.updateFormModel);
    				console.log(cid)
    				
    				this.axios.post("http://localhost:8100/api/shop/update1",this.updateFormModel, {
    					params: {
    						
    						cid: cid.join()
    					}
    				}).then((res) => {
    					alert("修改成功");
    					this.updateModel = false;
    					this.initData();
    				})
    			},
    			handleSelectionChange(val) {
    				this.multipleSelection = val;
    			},
    			del(){
    				console.log("@@@@@@@@@@@@@555555555")
    				console.log(this.multipleSelection )
    				let sid = [];
    				for (let i in this.multipleSelection) {
    					sid.push(this.multipleSelection[i].id)
    				}
    				if (confirm("确定进行删除id为" + sid + "的数据")) {
    					this.axios.get("http://localhost:8100/api/shop/dell", {
    						params: {
    							sid: sid.join(),
    						}
    					}).then((res) => {
    						alert("删除成功");
    						this.initData();
    					})
    				}
    			},
    			chaStudent(row){
    				console.log(row.id)
    				this.axios.get('http://localhost:8100/api/shop/list2', {
    					params: {
    						id:row.id,
    				
    					}
    				}).then((res) => {
    					this.tableData1 = res.data;
    					console.log("%%%%%%%%%%%%%%%%%")
    					console.log(this.tableData1)
    				});
    				this.xiangqing=true;
    				
    			}
    			
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    		}
    
    
    	}
    </script>
    
    <style>
    	.avatar-uploader .el-upload {
    		border: 1px dashed #d9d9d9;
    		border-radius: 6px;
    		cursor: pointer;
    		position: relative;
    		overflow: hidden;
    	}
    
    	.avatar-uploader .el-upload:hover {
    		border-color: #409EFF;
    	}
    
    	.avatar-uploader-icon {
    		font-size: 28px;
    		color: #8c939d;
    		width: 100px;
    		height: 100px;
    		line-height: 100px;
    		text-align: center;
    	}
    
    	.avatar {
    		width: 100px;
    		height: 100px;
    		display: block;
    	}
    </style>
    
    
    更多相关内容
  • 今天小编就为大家分享一篇layui表格数据复选框回显设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • element多选框回显问题

    2021-07-15 13:50:09
    做一个基础的多选框 数据是从后端接口调用的 如下图 在页面刷新进入的时候 多选选择和查询后端接口返回数据都没有问题 但是多选的回显的时候 点击选项就会报错 value.splice is not a function value.push is not a ...
  • vue + element 表格多选框回显

    万次阅读 2020-04-16 08:37:42
    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效: <el-table row-key="id" :data="tableData" v-loading...

    项目开发使用的elemnetUI的table组件,牵扯到一个多选框的回显机制,这里记录一下。

    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效:
    在这里插入图片描述

    <el-table
              row-key="id"
              :data="tableData"
              v-loading.body="tableLoading"
              :header-cell-style="headerClass"
              :max-height="tableHeight"
              :height="tableHeight"
              tooltip-effect="light"
              element-loading-text="加载中"
              style="width: 100%" ref="myTable"
              @selection-change="mySelectionChange"
              stripe label-class-name="el-table-th">
              <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
              <el-table-column label="序号" min-width="10" type="index" align="center">
                <template slot-scope="scope">
                  {{(tablePage.pageNum - 1)*tablePage.pageSize + scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="书名" min-width="80" prop="type" align="center">
                <template slot-scope="scope">
                  {{scope.row.title}}
                </template>
              </el-table-column>
              <el-table-column label="书籍类型" min-width="80" prop="type" align="center">
                <template slot-scope="scope">
                  {{scope.row.typeName}}
                </template>
              </el-table-column>
              <el-table-column label="书籍状态" min-width="70" prop="status" align="center">
                <template slot-scope="scope">
                  {{scope.rowstatus=='1'?'开放':'关闭'}}
                </template>
              </el-table-column>
    
            </el-table>
    

    都是elementUI自带的事件,详细了解可以去看官网,

    elementUI table的多选框是双向切换状态,即点击勾选,再点击取消勾选,所以要实现回显功能,首先应该判断多选框当前的状态,默认的select事件会携带两个参数,selection即当前勾选的所有数据的集合(数组),row即当前行的数据,重要代码如下:

    //更改选择的书籍信息
          mySelectionChange(val,index) {
            this.mySelect=val;
          },
    

    回显操作(让某一行回显)

       this.$refs.trainingMaterialTable.toggleRowSelection(row, true) // 回显
    

    清除整个表格的回显

      this.$refs.myTable.clearSelection();  //清除回显
    
    展开全文
  • 解决element多选框回显问题

    千次阅读 2021-01-07 15:07:43
    解决element多选框回显问题一、问题二、解决方法 一、问题 后端返回的多选框内容为一个字符串,而下拉框的内容必须放在数组中未多个字符串才可以显示,因此要对返回的数据进行处理。 二、解决方法 代码如下(示例...

    解决element多选框回显问题


    一、问题

    后端返回的多选框内容为一个字符串,而下拉框的内容必须放在数组中未多个字符串才可以显示,因此要对返回的数据进行处理。
    在这里插入图片描述
    在这里插入图片描述

    二、解决方法

    代码如下(示例):

    for(var i of res.rows){
      let old = i.operatorTypes && i.operatorTypes != null ? i.operatorTypes.toString() : null;
      let news = old != null ? old.split(',') : null;          
      i.operatorTypes = news ;
    }
    

    在这里插入图片描述

    展开全文
  • 先上效果图: 功能拆分: 先模拟100条数据在 tableData 将tableData 分页切片处理: this.tableData.slice( (this.pageNumber - 1...分页选择数据回显并且保存选中的数据 完整代码实现: <template> <div>

    先上效果图:
    在这里插入图片描述
    功能拆分:
    (1)先模拟100条数据在 tableData
    (2)将tableData 分页切片处理:
    this.tableData.slice( (this.pageNumber - 1) * this.pageSize, this.pageNumber * this.pageSize );
    注意,这里使用 computed 计算属性 pageTableData 来存储切片后当前页的列表数据
    (3)分页时选择数据回显并且保存选中的数据 this.getDataByPage()

    完整代码实现:

    <template>
      <div>
        <el-table
          id="fixTable"
          class="myt-table"
          header-cell-class-name="myt-table-header"
          border
          :data="pageTableData"  
          :row-key="getRowKeys"
          ref="multipleTable_1"
          @selection-change="handleSelectionChange"
          @select-all="selectAll"
        > <!-- :height="tableHeight || 'auto'" -->
          <el-table-column type="selection" width="40" > </el-table-column>
          <el-table-column type="index" label="序号" width="60" align="left" class-name="pollution-table-pd"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="name" min-width="200" label="企业名称"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="city" width="100" label="所属地市"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="county" width="100" label="所属区县"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="conType" width="120" label="污染物类型"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="responseLevel" width="100" label="应对级别"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="enterType" width="120" label="企业类型"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="industryType" width="100" label="行业类型"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="enterpriseLevel" width="100" label="企业等级"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="measuresType" width="160" label="措施类型"> </el-table-column>
          <el-table-column align="left" class-name="pollution-table-pd" prop="measuresDetail" min-width="400" label="措施详情"> </el-table-column>
        </el-table>
    
        <div class="pd-top20 pd-bottom20 pager_add" id="pageFooter" >
          <div class="select-con" >
            <span class="select-text"
              >已选中
              <span class="select-num">{{ EleSelectedNum }}</span></span
            >
            <el-button @click="allCheckEvent" class="common-btn">全部选中</el-button>
            <el-button @click="cancelSelect" class="common-btn" v-show="EleSelectedNum > 0">取消选中</el-button>
          </div>
    
          <el-pagination
            class="myt-pager"
            background
            layout="total, prev, pager, next,sizes"
            :total="totalCount"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page="pageNumber"
            @current-change="pageChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          pageNumber: 1,
          pageSize: 10,
          totalCount: 0,
          tableData: [],
          selectedIds_1: [], //当前页选中的数据
          sourceAllData: [],
          EleSelectedNum: 0,
          selectedIdsAll_1: [], //所有选中的数据包含跨页数据
        }
      },
      computed: {
        pageTableData() {
          let arr = this.tableData.slice((this.pageNumber - 1) * this.pageSize, this.pageNumber * this.pageSize)
          return arr
        },
      },
      watch: {
        // 监听全部页选中的值
        selectedIdsAll_1(val) {
          this.calculateVal(this.selectedIds_1, val) //当前值 currentVal,全部值allVal
          this.EleSelectedNum = val.length
        },
        //监听当前页选中
        selectedIds_1(val) {
          this.calculateVal(val, this.selectedIdsAll_1)
        },
      },
      methods: {
        // 分页获取数据
        getDataByPage() {
          let arr = []
          this.pageTableData.forEach((work) => {
            if (this.selectedIdsAll_1.indexOf(work.id) >= 0) {
              for (let i = 0; i < this.selectedIdsAll_1.length; i++) {
                if (this.selectedIdsAll_1[i] === work.id) {
                  arr.push(work)
                }
              }
            }
          })
    
          setTimeout(() => {
            this.handleSelectionChange(arr)
            this.selectedIds_1 = arr
            this.pageTableData.forEach((row) => {
              for (let j = 0; j < arr.length; j++) {
                if (row.id === arr[j].id) {
                  this.$refs.multipleTable_1.toggleRowSelection(row)
                }
              }
            })
          })
        },
        // 第几页
        pageChange(val) {
          this.pageNumber = val
          this.getDataByPage()
        },
        // 当前分页大小
        sizeChange(val) {
          this.pageSize = val
          this.getDataByPage()
        },
        // 计算当前页的值与总选择集合
        calculateVal(currentVal, allValue) {
          // 当前页所有列表id集合 copyData
          let copyData = [] 
          this.pageTableData.forEach((work) => {
            copyData.push(work.id)
          })
    
          // 当前页选中的id集合:currentVal , 总选择集合:allValue
          currentVal.forEach((id) => {
            // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
            if (allValue.indexOf(id) < 0) {
              allValue.push(id)
            }
          })
    
          // 当前页没有选中的id集合 noSelectIds
          let noSelectIds = [] 
          copyData.forEach((item) => {
            if (copyData.includes(item) && !currentVal.includes(item)) {
              noSelectIds.push(item)
            }
          })
    
          // 总选择里面的id集合
          let selectAllIds = JSON.parse(JSON.stringify(allValue))
    
          //总选中集合
          if (noSelectIds.length > 0) {
            noSelectIds.forEach((id) => {
              if (selectAllIds.indexOf(id) >= 0) {
                for (let i = 0; i < allValue.length; i++) {
                  if (allValue[i] === id) {
                    // 如果总选择中集合中有未被选中的,那么就删除这条
                    allValue.splice(i, 1)
                  }
                }
              }
            })
          }
    
        },
        // 选中
        handleSelectionChange(list) {
          let currentSelected = []
          list.forEach((item) => {
            currentSelected.push(item.id)
          })
          this.selectedIds_1 = currentSelected
        },
        // 解决elemetUI Table表格多选无数据时,复选框显示disabled点击却可勾选
        selectAll(val) {
          if (!val.length && !this.tableData.length) {
            this.$refs.multipleTable_1.clearSelection()
          }
        },
        // 取消选中
        cancelSelect() {
          this.$refs.multipleTable_1.clearSelection()
          this.selectedIdsAll_1 = []
          this.selectedIds_1 = []
        },
        // 全部选中
        allCheckEvent() {
          // 全部选中的数组
          let arr = []
          this.sourceAllData.forEach((item) => {
            arr.push(item.id)
          })
    
          this.selectedIdsAll_1 = arr
          let currentArr = []
          this.pageTableData.forEach((row) => {
            this.$refs.multipleTable_1.toggleRowSelection(row, true)
            currentArr.push(row.id) // 选中id数组
            this.selectedIds_1 = currentArr
          })
        },
        getRowKeys(row) {
          return row.id;
        },
      },
      created() {
        for (let i = 0; i < 100; i++) {
          let item = {
            id: i + 1,
            index: i,
            name: 'xxxxxx有限公司',
            city: '广州市',
            county: '黄埔区',
            conType: 'xx',
            responseLevel: 'xxx级',
            enterType: 'xxxx',
            industryType: 'xxxx',
            enterpriseLevel: 'x级',
            measuresType: 'xxxxx',
            measuresDetail: 'xxxxxx',
          }
    
          if (i === 11 || i === 12 || i === 13 || i === 14) {
            item.name = '第二页'
          }
          this.tableData.push(item)
        }
    
        this.sourceAllData = JSON.parse(JSON.stringify(this.tableData))
        this.totalCount = this.tableData.length
      },
    }
    </script>
    <style scoped>
    .pager_add {
      display: flex;
      background-color: #04294b;
      justify-content: space-between;
    }
    </style>
    
    展开全文
  • element 多选框回显无法点击问题

    千次阅读 2020-10-30 18:55:18
    2.多选框回显后无法点击 在回显后,多选框无法点击,这里有两点错误: 1.后台返回的数组是[“1”,“2”]是stirng形式的,而我需要number形式的,这里使用array.map(Number)方法转换一下。 2.就是无法点击,这里是...
  • element中table多选框回显

    万次阅读 2018-09-30 15:13:32
    在项目中遇到table表格多选框的问题,结果只知道把选中的值传给后台,却不知道怎么将后台返回的数据回显到表格中,这就尴尬了。看了element文档以及查了一些资料后终于勉强弄出来了,先记录一下。 首先在表格中设置...
  • element-ui中table多选框回显

    千次阅读 2020-02-26 16:08:50
    但是在回显的时候遇到了点麻烦~, 要根据后台返回的id集合,将列表选中。一开始没注意看文档,绕了好久都没想到,后面网上搜索了点资料然后再根据文档,终于弄出来了,原来这么简单。特此记录一下 最主要是table...
  • jq复选框回显

    2021-08-30 10:04:06
     //获取所有的复选框值 var holidaylist = '{$data.holiday_id|default = \'\'}'; //用el表达式获取在控制层存放的复选框的值为字符串类型 var holiday = holidaylist.split(','); $.each(holiday, ...
  • <el-table ref="table" :data="tableData" :row-key="getRowKey"> <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column> ...//获取到...
  • bootstrap-select 多选框回显问题

    千次阅读 2018-11-23 15:36:08
     //回的数据  if (season !=null && season !='') {  var seasonlist = season.replace(/ /g,'').split(",");  $('.selectpicker').selectpicker('val',seasonlist);  $('.selectpicker').selectpicker('...
  • easyui多选框回显问题

    2018-12-20 10:27:12
    // 多选框 - custom-data-multiple Java开发交流群 677807540 大家可以一起讨论技术欢迎加入  $(".custom-data-multiple").each(function(row, index) {  // form组件 清除审核校验样式  $(this)....
  • js复选框回显写法

    2021-06-25 13:32:20
    最近在写前端了,好久不写,摸索的写,下面说下复选框回显,选中,页面转中文展示写法,当然写法很,仅供参考学习 // html checkbox写法 <label for="" class="col-sm-2 control-label">[[#{payfees....
  • 1.多选框回显:js:$(function(){var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象var checkArray=${list};//获取多选框需要回显得对应的值集合console.info("checkArray=...
  • 应用场景:需要将所有的多选框的标签的值拿到注意不是value值 是标签的文本,然后根据后台(java)传过来的值进行回显 代码如下: var role = obj.roleName.split(",");//后台传过来的字符串 var check = []; ...
  • //取到ajax回显多选框值 var checkArray = response.ebd.additionalInfo4EBD.playChannel.split(","); var checkBoxAll = $(“input[name=‘editPlayChannel’]”); for (var a = 0; a < checkArray.length; a...
  • 一、Thymeleaf+layui+jquery复选框回显基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery。大致意思是:把数组转成JSON传到前台,再在前台转回数组AJAX一般都是用JSON格式或XML格式来传递数据的JSON就是一...
  • layui复选框回显

    千次阅读 2018-09-27 15:14:00
    根据后台传回的数据进行判断是否选择 layui.use(['table','form','laypage','util'], function() { var laypage = layui.laypage ,table = layui.table ,form = layui.form ...
  • element ui table 根据已有的数据回显勾选复选框 html页面 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" <!-- element-ui多选框rese
  • layui表格数据复选框回显设置

    千次阅读 2018-11-15 14:43:41
    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。 layui这里有一个坑,...
  • Element-ui框架checkbox复选框回显

    千次阅读 2019-04-18 10:58:00
    先看下效果是不是你需要的。...然后废话不说,上代码,希望能够帮助到你。。。 1 <template> 2 <div class=''> 3 <el-form label-width="100px" class="demo-ruleForm"> 4 ...
  • vue + elementUI 表格多选框选中 回显

    万次阅读 2019-07-24 19:22:51
    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效: <el-table ref="multipleTable" :data="carData" :empty-t...
  • 最近在学习vue,入门不难,学习很快,但是过程中遇到很小且奇葩的坑。你说它小吧,也花了我不少时间一步步排查测试,说它不小吧,最终发现是很小很小的问题引起的。特此记录一下!事情是这样的。我需要在点击列表...
  • 单选框,多选框回显

    2019-04-02 15:47:06
    注意:同一个字段,单选框或多选框name最好相同 代码: 4. 从数据库获取数据,通过model传参 @RequestMapping("addUser.do") public String addUser(Model model){ List<Sex> sexlist = us.selSex(); model.....
  • elementUI 表格组件复选框回显问题

    千次阅读 2020-06-30 23:57:21
    官方文档的关键 table上的属性 正常使用 <el-table :row-key="getkey"> </el-table> //在data里或者methods里 // row 当前行数据 getkey(row){ return row.id } 第二属性 ......
  • this.$nextTick(() => { if(this.tableData.length){ //右边表格的数据 this.StiontableData.forEach(item=>{ //左边表格的数据 this.tableData.forEach(row => { //将右边的表格进行遍历 ...
  • layui表格复选框回显

    千次阅读 2019-06-27 11:31:17
    必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true 从文档中我们看到,当数据中,增加一个字段LAY_CHECKED,并且为true,就会勾选上。我们就可以按照规则,去处理我们的要勾选的数组...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,469
精华内容 2,587
关键字:

多选框回显

友情链接: jkjzpkl.rar