iView 通过render函数 实现 InputNumber 的双向数据绑定，踩坑二、

使用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, //双向数据绑定