最近项目接近尾声，本人趁着有些空余时间，做了vue的一个简单的页面，主要是分析，在未使用组件与ui框架的情况下，对table数据的处理，其中包括行处理，td中的select的处理等。以及相关事件的触发，属性的改变。
首先，先给出table html的代码：
<table class = "table table-bordered table-hover t_table_e sid-table" id = "SDI_table">
<tbody>
<tr v-for = "(trval, index) in tableData" v-bind:cguid= "trval.Guid" v-bind:data-port = "trval.Port" :data-name= "trval.Name" class = "tr_style_table" :class = "[trval.IO == 'IN'?'inStyle':'outStyle']">
<td width = "3%" class = "td_alldel">{{index + 1}}</td>
<td width = "15%" class="l28"><span class = "check_flow_have" :class= "flowHave(trval.Port)" @mouseenter="mouseoverCh(flowHave(trval.Port))" @mouseleave="mouseLeaveCh()"></span>{{trval.Name}}</td>
<td width = "10%" class = "channelDriect">
<select class="direction dsi dsi_sel" v-on:change = "dirMoChange($event.target.value, index, 'IO')" @focus = "dirMoBlur($event.target.value)" v-model = "trval.IO">
<option value = "IN">输入</option>
<option value = "OUT">输出</option>
</select>
</td>
<td width = "10%" class = "FormatVal">
<select v-model= "trval.Format" v-on:change = "dirMoChange($event.value, index, 'Format')" @focus = "dirMoBlur($event.target.value)" class="sign-format dsi dsi_sel formatAllChangeEvent">
<option v-for = "format in formatOpt" :value = "format.value">{{format.value}}</option>
</select>
</td>
<td width = "5%" class = "colorBitsVal colorbitsall_td">
<select v-model= "trval.ColorBits" v-on:change = "dirMoChange($event.target.value, index, 'ColorBits')" @focus = "dirMoBlur($event.target.value)" class ="dsi colorBits_sel dsi_sel colorbitsall_sel" style = "width: 80%">
<option v-for = "clbt in colorbitOpt" :value = "clbt.value" v-if = "colorOptSeen(trval.Format, clbt.value)">{{clbt.text}}</option>
</select>
</td>
<td width = "10%" class = "AudioVal">
<select v-model= "trval.Audio.ChannelNums" v-on:change = "dirMoChange($event.target.value, index, 'Audio')" @focus = "dirMoBlur($event.target.value)" class = "dsi audio_html_val dsi_sel" data-prev = "">
<option v-for = "adval in audioOpt" :value = "adval.value">{{adval.name}}</option>
</select>
</td>
<td width = "47%" class = "channel_alias">
<input type="text" class="alias dsi" v-on:keydown = "aliasKeydown" v-model = "trval.AliasName" style="width:90%" placeholder="请输入别名...">
</td>
</tbody>
</table>
其中tableData 是从后台获取到的数据；
- 如何获取行数据
其中td中有select框，其中有个功能是修改某一行中的值，要把这一行的数值字段发给后台。本人使用类似v-on:change = "dirMoChange($event.target.value, index, 'Audio')" 使用index，把tableData 中我需要的字段拿出来 ( 因为index正好对应某一行的数据）
methods:{
dirMoChange(val, index, type){
this.saveEable = true; //保存按钮的变化
let d_name = this.tableData[index].Name;
let d_io = this.tableData[index].IO; //方向
.....
},
}
- 如何在修改select框的时候，不符合修改条件，进行赋值成之前的值
首先利用focus事件，获取到select框的初始值； 然后在change 事件中，找到index与type 进行数据定位，最后赋值修改. ( 这个方法有弊端，就是要把要此字段名称通过change事件传参type进行传过来， 就很死板。）
//其中this.focusVal 为focus事件获取的select框的初始值
if(useStatus == 'NO'){
//this.$set(val, this.focusVal, true);
this.tableData[index][type] = this.focusVal;
return;
}
我使用 this.$set实例方法进行修改，就是不行。我也不知道为啥?
- table数据的保存
保存的时候，有些tableData 中的数据是你不想要的字段，可以进行数据的过滤
savebtn(){
const [...saveData] = this.filerSurplus(this.tableData); //进行数据过滤
axiosHttp({
method: 'POST',
url: 'sdiconfig/sendCardChannelInfo',
data: {'Value': saveData}
}).then( res =>
}).catch( error => {
});
},
filerSurplus(tabledata){
const data = [];
for(let vv of tableData){
const obj = {};
obj['aa'] = vv.aa;
obj['bb'] = vv.bb;
...
data.push(obj);
}
return data;
}
以上为全部内容。
如有意见，请留言。
