element-ui中将checkbox与input框进⾏关联
刚开始⽹上搜了很多,⼀直没看到满意的东西，后来⾃⼰就结合element-ui现有的东西写了⼀个,⽅便以后参考
具体效果如下:
现在的逻辑就是输⼊框输⼊条件,+可以添加数据⾏,√(如果第⼀次是添加，第⼆次就是修改)，前⾯的勾选是选择创建的条件拿到当前⼀条的数据，然后给其他地⽅⽤，如果是没有提交过的数据不允许勾选，所有要禁⽤勾选
//这⼏个是覆盖element-ui原来的样式
thead{
display: none;
}
.el-table {
border: 0;
}
.el-table::before {
background-color:white;
}
.el-table::after {
background-color:white;
}
.el-table .cell {
text-align: left;
}
<div class="col-sm-12 k_change_inp" >
<p >
⽀持退货原因设置
</p>
<el-table
ref="multipleTable"
:data="condition"
tooltip-effect="dark"
@select="handleSelect">
<el-table-column
:selectable="selectable"
type="selection"
width="55">
</el-table-column>
<el-table-column
width="310"
>
<template scope="scope">
<el-input v-model="w.settingValue"></el-input>
</template>
</el-table-column>
<el-table-column
width="120"
>
<template scope="scope">
<i title="添加" @click="addCondition" class="i-icon el-icon-plus"></i>
<i title="删除" v-if="scope.$index == 0 ? false : true" @click="removeCondition(scope.$w)" class="i-icon el-icon-close"  ></i>
<i :title="w.id ? '修改' : '提交'" @click="w)" class="el-icon-circle-check"></i>
</template>
</el-table-column>
</el-table>
</div>
data() {
return {
condition: [{
settingValue: '',
}],
}
},
created () {
this._getconditionList();
},
methods: {
_getconditionList() {    //获取条件列表
})
},
handleSelect(selection, row) {
if(row.id) {                //这⾥根据id来判断是否是勾选
var params = {
id:row.id,
settingType:""
input框禁止输入}
if(row.settingType == "N") {
params.settingType = "Y";
}else {
params.settingType = "N"
this.editSettingType(params);      //改变状态⽅法
}
},
submitCondition(row) {  //提交
if(row.id) {
var params = {
id: row.id,
settingValue: row.settingValue
}
this.editSettingValue(params);    //修改
}else {
if(im() != '') {
Model.addCondition(row).then(res => {    //添加
if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "内容添加成功"
})
}
setTimeout(() => {
},1000)
})
}else {
this.$message({
type: "error",
message: "请输⼊添加内容"
})
return;
}
}
},
addCondition() {    页⾯的+
},
removeCondition(index,row) {  删除
if(row.id) {
Model.deleteCondition({id:row.id}).then(res => {  //删除已添加的数据                        if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "删除成功"
})
}
})
}else {
},
// 修改选中状态
editSettingType(params) {
Model.editCondition(params).then(res => {
if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "状态修改成功"
})
}
})
// 修改内容
editSettingValue(params) {
Model.editCondition(params).then(res => {
if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "内容修改成功"
})
}
})
},
toggleSelection(rows) {
if (rows) {
this.$nextTick(() => {
rows.forEach(res => {
if(res.settingType == "Y") {
this.$leRowSelection(res, true);                        }
});
})
} else {
this.$refs.multipleTable.clearSelection();
}
},
selectable(row) { //禁⽤选框
if(!row.id) {
return false;
}else {
return true;
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。