vue实现表格里插入输入框,实现编辑操作,添加必填校验
背景产品经理今天的需求里有一点是:表格里面需要加入输入框,对表格数据的某一个属性进行编辑,一开始我是使用el-table,在里面直接加入el-input,但过程种发现了问题,输入框输入值没有反应,并没有双向绑定到属性上;# 问题讲解##### 尝试但是失败了的写法是:<el-table :data="batchRowsDatas"><el-table-columnprop="bi
·
背景
产品经理今天的需求里有一点是:表格里面需要加入输入框,对表格数据的某一个属性进行编辑,
一开始我是使用el-table,在里面直接加入el-input,但过程种发现了问题,输入框输入值没有反应,并没有双向绑定到属性上;
# 问题讲解 ##### 尝试但是失败了的写法是:
<el-table :data="batchRowsDatas">
<el-table-column
prop="bid_edit"
label="价格"
width="320"
align="center"
>
<template slot-scope="scope">
<el-form :ref="`batch_bid${scope.row.index}`" :model="scope.row" class="batch-form">
<el-form-item :prop="`${scope.row.index}bid_edit`" :rules="batchBidRules" label="">
<el-input v-model="scope.row.bid_edit" placeholder="请输入" class="w120" @input="getNewNote()"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
看见输入框有值输入,但是没有显示。
所以我换了一个思路,不使用el-table,自己手动实现table表格试试看;
<div class="table mt24">
<div class="table-content">
<div class="headers">
<div class="common back t-header">账户名称</div>
<div class="common back t-header">账户备注</div>
<div class="common back t-input">修改账户备注</div>
</div>
<div class="headers" v-for="(item, index) in accountList" :key="item.advertiser_id">
<div class="common t-header">
<span :title="item.advertiser_nick">
{{ item.advertiser_nick }}
</span>
</div>
<div class="common t-header">
<span :title="item.note">
{{ item.note }}
</span>
</div>
<div class="t-input displays" :id="`mark${index}`">
<el-input
v-model="item.new_note"
placeholder="请输入账户备注"
class="note_input"
@input="getNewNote($event, index)"
>
</el-input>
<div class="error_msg"> // 错误校验
{{ item.error_mess }}
</div>
</div>
</div>
</div>
</div>
method:{
getNewNote(value, index) {
this.accountList[index].new_note = value;
this.checkIsOk(index);
this.$forceUpdate(); // 必须加上,强制更新视图
},
}
<style>
.table {
max-height: 445px;
overflow: hidden;
overflow-y: auto;
border: 1px solid #e8eaec;
border-bottom: none;
.headers {
display: flex;
}
.common {
height: 55px;
padding: 0 8px;
overflow: hidden;
font-size: 12px;
line-height: 55px;
color: #333;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid #e8eaec;
}
.back {
background-color: #fafafa;
}
.t-header {
width: 250px;
border-right: 1px solid #e8eaec;
}
.t-input {
width: 426px;
border-bottom: 1px solid #e8eaec;
}
.error_msg {
padding-top: 0;
padding-left: 13px;
font-size: 12px;
line-height: 1;
color: #f56c6c;
}
}
</style>
自己手动实现了双向绑定,一山更比一山高,解决了双向绑定发现还有新的需求:需要对每个输入框进行校验。
开始的设计是每个输入框放在el-form下,作为单独的表单模块,结果发现虽然视图更新了,但是el-form的校验拿不到更新的值,没有绑定进去,所有又只能自己实现了。
添加字段 isValiad 来判定是否符合校验,errorMsg 存校验错误的信息,统一卸写在了方法里面:
checkIsOk(index) {
let isValid = true;
let item = this.accountList[index];
if (!item.new_note) {
item.error_mess = "账户备注不允许为空";
item.isError = true;
isValid = false;
} else if (this.$utils.getBytes(item.new_note) > 100) {
item.error_mess = "账户备注长度不得超过100字符";
item.isError = true;
isValid = false;
} else {
item.isError = false;
item.error_mess = "";
}
return isValid;
},
更多推荐
已为社区贡献6条内容
所有评论(0)