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;
}
支持退货原因设置
data() {
return {
condition: [{
settingValue: '',
}],
}
},
created () {
this._getconditionList();
},
methods: {
_getconditionList() { //获取条件列表
Model.getConditionList({}).then(res => {
this.condition = res.data;
this.toggleSelection(res.data); //将以前勾选过的在得到数据的时候进行勾选
})
},
handleSelect(selection, row) {
if(row.id) { //这里根据id来判断是否是勾选
var params = {
id:row.id,
settingType:""
}
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(row.settingValue.trim() != '') {
Model.addCondition(row).then(res => { //添加
if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "内容添加成功"
})
}
setTimeout(() => {
location.reload()
},1000)
})
}else {
this.$message({
type: "error",
message: "请输入添加内容"
})
return;
}
}
},
addCondition() { 页面的+
this.condition.push({});
},
removeCondition(index,row) { 删除
if(row.id) {
this.condition.splice(index, 1);
Model.deleteCondition({id:row.id}).then(res => { //删除已添加的数据
if(res.callStatus == "SUCCESS") {
this.$message({
type: "success",
message: "删除成功"
})
}
})
}else {
this.condition.splice(index, 1) //仅删除刚创建的一行(没有提交过的)
}
},
// 修改选中状态
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.$refs.multipleTable.toggleRowSelection(res, true);
}
});
})
} else {
this.$refs.multipleTable.clearSelection();
}
},
selectable(row) { //禁用选框
if(!row.id) {
return false;
}else {
return true;
}
},