Element-ui表格选中回显

先瞄一下,是不是你要的效果网址:yii666.com<文章来源地址:https://www.yii666.com/article/333081.html

Element-ui表格选中回显文章来源地址https://www.yii666.com/article/333081.html文章地址https://www.yii666.com/article/333081.html

然后,废话不多说,直接上代码啦

 <template>
<div class>
<div class="projectData">
<el-table :data="tableData2" ref="multipleTable" :show-header="false" :border="false" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column prop="spaceName" width="180"></el-table-column>
<el-table-column>
<template slot-scope="scope" v-if="scope.row.id==1||scope.row.id==3||scope.row.id==4">
<el-input
v-model="scope.row.spacePrice"
class="el-input_inner"
size="medium"
clearable
></el-input>
{{scope.row.spaceUnit}}
</template>
</el-table-column>
</el-table>
</div>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</template> <script>
export default {
data() {
return {
tableData2: [],
multipleSelection: [],
listData:[],
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
for (var i = 0; i < this.multipleSelection.length; i++) {
this.multipleSelection[i].containSpace = 1;
}
},
// 初始化数据
projectManage(){
this.$axios.get("/clapi/materiel/mealSpaceRela/queryProjectManage?mealId="+this.message.id)
.then((response) => {
if(response.data.status.code == 200){
this.tableData2 = response.data.result;
this.listData = response.data.result
for ( let i = 0 ; i < this.listData.length ; i++ ){
if(this.listData[i].containSpace == 1){
//这是默认选中上的
this.$refs.multipleTable.toggleRowSelection(this.tableData2[i],true);
}
}
}
})
.catch(error => {
console.log(error);
});
},
// 保存
submitForm() {
// 数组为空的话,状态为0,输入框为0
if(this.multipleSelection.length == 0){
for (var i = 0; i < this.tableData2.length; i++) {
this.tableData2[i].containSpace = 0;
this.tableData2[i].spacePrice = 0;
}
this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.tableData2)
.then((response) => {
this.$message({
type: "success",
message: "保存成功!"
});
})
.catch((error) =>{
console.log(error);
});
}else{
//已选数据,其他输入的值为0
for(var n=0;n<this.multipleSelection.length;n++){
// 如果选中的数据为空默认为0
if(this.multipleSelection[n].spacePrice=='')this.multipleSelection[n].spacePrice=0;
}
this.$axios.post("/clapi/materiel/mealSpaceRela/editProjectManage",this.multipleSelection)
.then((response) => {
this.$message({
type: "success",
message: "保存成功!"
});
})
.catch((error) =>{
console.log(error);
});
} },
},
created() {
this.projectManage(); }
};
</script> <style scoped>
.projectData >>> .el-input__inner {
text-align: center;
} .projectData >>> .el-table--enable-row-hover .el-table__body tr:hover > td {
background: #fff!important;
} .projectData tr {
height: 60px !important;
}
.projectData {
margin-left: 80px;
}
.favour_checkbox {
height: 60px;
display: block;
} table,table th,table tr td {
border:1px solid red;
} .el-input_inner,
.el-select {
text-align: center;
width: 100px;
} </style>

若有不明白请加群号:复制 695182980 ,也可扫码,希望能帮助到大家。

Element-ui表格选中回显         Element-ui表格选中回显网址:yii666.com

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

Element-ui表格选中回显-相关文章

  1. Element-ui表格选中回显

    先瞄一下,是不是你要的效果然后,废话不多说,直接上代码啦若有不明白请加群号:复制 695182980 ,也可扫码,希望能帮助到大家。         

  2. iOS 向模拟器里添加照片

    iOS 向模拟器里添加照片模拟器里Photos最开始时是没有照片的,有时我们做Demo时需要Photos里面的照片做测试,这时就需要把Mac上的照片导入到模拟器里。步骤如下:1,打开模拟器2,选中照片,把照片往模拟器里拖(这时照片会以Safari打开)3,鼠标长按照片,弹出菜单以后,选

  3. Swift - 使用UIImagePickerController从相册选择照片并展示

    1,UIImagePickerController介绍(1)选择相册中的图片或者拍照,都是通过UIImagePickerController控制器实例化一个对象,然后通过self.presentViewController方法推送出界面显示。(2)使用presentViewController的类需要实现UIImagePickerControllerDelegate,UINavigationControllerDelegate两个代理。(3)UIImagePic

  4. 【代码笔记】iOS-collectionView实现照片删除

    一,效果图。二,工程图。三,代码。ViewController.hViewController.mphotoCollectionViewCell.hphotoCollectionViewCell.m

  5. Android--多媒体操作

    ---恢复内容开始---1、拍照,这里直接上代码,看注释就好--文件存储需要由权限:2、相册选择照片并显示:--上述操作中,由于选中的图片可能会很大,通常需要压缩后再进行显示;3、音频播放1)Android 中通过使用 MediaPlayer 类来实现音频播放,它的常用控制方法有:--setDat

  6. wex5 教程之 图文讲解 文件上传attachmentSimple(1)

    视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html效果预览:1 调用attchmentSimple组件,打开文件管理器,并选中,显示选中照片名称2 图片上传成功,并在img组件中预览3 数据库写入成功,并成功被其它页面引用源码初探附件组件attachmentSimple是wex5文件上传与下载重要的处理

  7. UIImagePickerController之Block回调

    方法使用:引入头文件#import \\\"UIImagePickerController+Block.h\\\"我这拖出来的两个属性@property (weak, nonatomic) IBOutlet UIImageView *showImageView;- (IBAction)openClick;// 实用方法- (IBAction)openClick {UIImagePickerController_Block *imagePickerVC = [UIImagePickerController_Block defaultController];[imagePickerVC initWith:self SourceType

  8. 与众不同 windows phone (5) - Chooser(选择器)

    原文:与众不同 windows phone (5) - Chooser(选择器)[索引页][源码下载]与众不同 windows phone (5) - Chooser(选择器)作者:webabcd介绍与众不同 windows phone 7.5 (sdk 7.1) 之选择器AddressChooserTask - 选择联系人的地址EmailAddressChooserTask - 选择联系人的emailPhoneNumberChooserTask - 选择联系人的电话S

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png