iview table 点击是input（可编辑）的render函数中如何设置元素的样式（2）

本文在 iview table  点击是input（可编辑）的render函数中如何设置元素的样式（1）的基础上新增加了，当初始化为空时，点击也有input 出现 以及传值时，如何传变量;

先上效果图：

2个事项：

①：当 input初始化为空时 ，给render 里面的div 给个高度， 点击区域时，input 就出现了 。

②：传值时注意事项：

这么传值就可以：

this.data3[params.index].mpname = event.target.value;

具体代码如下：

<template>
    <div>
        <!-- 列表信息 -->    
        <div class="listfile">
            <i-table border ref="selection" :columns="columns2" :data="data3"></i-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="20" show-total :current="currentPage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
   data () {
        return {
                dataCount:1,// 初始化信息总条数
                currentPage:1, //当前页
                pageSize:20,// 每页显示多少条
                columns2: [
                    {type: 'selection', width: 60,align: 'center'},
                    {title: '监控项名称',key: 'mpname',width: 150, align: 'center',
                        render: (h, params) => {
                            return h('div',{
                                style:{
                                    width:'100px',
                                    height:'100%',
                                },
                            },
                            [h('input',{
                                style:{
                                    width:'100px',
                                    height:'22px',
                                    border: '1px solid #dcdee2',
                                    display: params.row.$isEdit? 'block' : 'none',
                                },
                                 domProps: {
                                    value: params.row.mpname,
                                },
                                props: {
                                    value: params.row.mpname,
                                },
                                on: {
                                    input: () => {
                                        console.log("params.row.mpname",this.data3, event,params.row.mpname)

                                    },
                                    "change": (e) => {
                                        console.log(e)
                                        console.log('enter事件！');
                                        this.data3[params.index].$isEdit = false;
                                        },
                                    "blur": () => {// 离焦事件
                                        console.log('离焦事件！');
                                         this.data3[params.index].$isEdit = false;
                                        this.data3[params.index].mpname = event.target.value;
                                    }
                                }
                            }),
                            h('div',{
                                style:{
                                    display:  params.row.$isEdit? 'none' : 'block',
                                    width: '100%',
                                    height: '48px',
                                },
                                on: {
                                    click: () => {
                                        console.log('点击了字！')
                                        this.data3[params.index].$isEdit = true;
                                    }
                                }
                            }, params.row.mpname)])
                        }
                    },
                    {title: '使用状态',key: 'usestate',width: 200,align: 'center',
                        render:(h, params) => {
                            return h('RadioGroup',
                                {
                                    props: {
                                        value: params.row.usestate //这里的value值对应Radio中的label中的值
                                    },
                                    on:{
                                        "on-change":(val)=>{
                                            params.row.usestate = val;
                                            this.data3[params.index].usestate = val;
                                            console.log(val,"测试radio选中的项",params.row.usestate);
                                        }
                                    }
                                }, 
                            [
                                h('Radio', {
                                    style:{'margin-right': '20px'},
                                    props:{
                                        "label":"1"
                                    },
                                }, '未使用'),
                                h('Radio', {
                                    props:{
                                        "label":"2"
                                    }
                                }, '已使用')
                            ]);
                        }
                    },
                ],
                //列表初始数据
                data3: [
                    {
                        mpname: '',
                        usestate: '1',
                        $isEdit: false,
                    },
                    {
                        mpname: '',
                        usestate: '2',
                        $isEdit: false,
                    }
                ],
              }
      },
    methods: {
    },
    created(){
    },
    mounted(){
    },

  }
</script>

<style>

</style>

注意事项：有个Bug， 在正式环境下，接口请求时，我们都忽略了：

点进input区域时：input框展开的初始值：

$isEdit = false;

正常情况下，接口请求时在for循环里面定义一次：

res.data.result[i].$isEdit = false;

最后在list俩标的那个数组里面在定义一次：

res.data.list.map(v=>{

//页面赋值后页面的 点击 input展开 可编辑 v.$isEdit = false;

v.$isEdit = false;

}）

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140