使用inputNumber 标签 在table表格里面实现 双向数据绑定
1. 全选 table 底部的 音量按钮会显示 ,同时音量按钮值的改变,table表格里面的row每行的音量值也会跟着变
2.table表格多选的时候,表格选中2行的时候,table 底部的 音量按钮会显示...同(1)
3.取消 分每行的取消和全部取消,目前取消,把t able 底部的 音量按钮 绑定的值清空
4.table表格 回显的时候,不能直接用 table绑定的那个数组,用另外一个数组过度一下,否则会出现,回显和其他问题
5.提交的时候传值问题,需要判断最终的数组里面,每一项里面的: params.row.volume !=null 就可以;
先来一个全选的样图:
第一步、从后台那点接口取列表的值:
//模拟后台接口返回的数据
var resultData=[
{"lineName":"八通线","stationName":"高碑店","areaId":"04010103100000001","areaName":"上行站台","areaNo":0,"volume":-1},
{"lineName":"八通线","stationName":"高碑店","areaId":"04010103100000002","areaName":"下行站台","areaNo":0,"volume":-1},
{"lineName":"八通线","stationName":"高碑店","areaId":"04010103100000003","areaName":"站厅","areaNo":0,"volume":15},
{"lineName":"八通线","stationName":"高碑店","areaId":"04010103100000004","areaName":"办公区","areaNo":0,"volume":15},
{"lineName":"八通线","stationName":"高碑店","areaId":"04010103100000005","areaName":"出入口","areaNo":0,"volume":15},
{"lineName":"八通线","stationName":"高碑店","areaId":"04120103100000011","areaName":"A端售票区","areaNo":0,"volume":-1},
{"lineName":"八通线","stationName":"高碑店","areaId":"04120103100000012","areaName":"B端售票区1","areaNo":0,"volume":-1},
{"lineName":"八通线","stationName":"高碑店","areaId":"04120103100000013","areaName":"C端售票区13","areaNo":0,"volume":-1}
];
this.data1 = resultData;
this.temp_data = JSON.parse(JSON.stringify(this.data1));
第二步、数据处理 单选、多选、全选、全选取消、单选取消
//全选 全部选中
selectTable_All(data){
if(data.length >0){
this.selectData = true; //全选音量显示
// this.selectDataArry = data; //传给提交接口
}else{
this.selectData = false;
}
},
//全选 全部取消
selectTable_Cancel(){
this.selectData = false;
this.volume = null;//清空全选
},
item_Cancel(data,row){
console.log("每行取消:",data,row)
this.temp_data.map((v,index) => {
if(row.areaId == v.areaId){
v.volume = null
}
})
},
row_Select(data){
console.log(data)
this.selected_data = data
if(this.data1.length == data.length || data.length >1){
this.selectData = true; //全选音量显示
// this.selectDataArry = data; //传给提交接口
}else{
this.selectData = false;
}
},
第三步、底部音量按钮值变化的监听,用on-change事件监听
get_changeVolume(e){
this.temp_data.map((v,index) => {
this.selected_data.map(select => {
if(select.areaId == v.areaId){
v.volume = e
}
})
})
console.log(this.selected_data, 'this.selected_data')
},
第四步、处理table表格里面的音量值得初始值
{title: '音量', key: 'volume',width:90,align:'center',type:'number',
render:(h,params)=>{
return h('div',[
h('InputNumber',{
props:{
min: 0,
max: 40,
// value: this.volume !== null ? this.volume : params.row.volume, //双向数据绑定
value: this.temp_data[params.index].volume
},
style:{
height: "30px !important",
width: "95%",
},
on:{
'on-change':(event)=>{
this.temp_data[params.index].volume = event
// console.log("InputNumber:",event);
// params.row.volume = event;
// this.data1[params.index].volume = event;
}
}
})
])
}
},
第五步提交、数据判断处理
//提交
sumitData(){
this.temp_data.map(v=>{
v.stations.map(m=>{
if(m.volume == null){
this.$alert("分区音量不能为空!", "温馨提示:");
}
})
})
},
全部code如下:
<template>
<div>
<Table border ref="table" :columns="columns4" :data="data1" @on-select-all="selectTable_All" @on-select-all-cancel="selectTable_Cancel" @on-select-cancel="item_Cancel" @on-select="row_Select" @on-selection-change="row_Select"></Table>
<Row type="flex" style="margin-top:10px">
<Col span="2" style="margin-left: 1.5%;">
<span v-show="selectData == true" style="display:inline-block; height:32px; line-height:32px;">音量值:</span>
</Col>
<Col span="3">
<InputNumber @on-change="get_changeVolume" v-show="selectData == true" type="number" v-model="volume" :min="0" :max="40"></InputNumber>
</Col>
<Col span="18" style="text-align: right;">
<Button size="large" type="primary" @click="sumitData()">提交</Button>
</Col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
volume: null,
selected_data: [],
selectData: false,
columns4: [
{type: 'selection',width:60,align: 'left'},
{title: '序号', type:'index', align:'center', width:70},
{title: '线路', key: 'lineName',width:80},
{title: '车站', key: 'stationName'},
{title: '分区', key: 'areaName'},
{title: '', key: 'areaId', sortType: 'asc', sortable: true, ellipsis:true, width:1,
render: (h, params) => {let _this = this;let texts = '';
texts = ''
return h('div', { props: {}, },texts)
}
},
{title: '音量', key: 'volume',width:90,align:'center',type:'number',
render:(h,params)=>{
return h('div',[
h('InputNumber',{
props:{
min: 0,
max: 40,
// value: this.volume !== null ? this.volume : params.row.volume, //双向数据绑定