账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    iView中Table通过render添加一个Input如何双向绑定数据
    39
    0

    有一个Table:

    <Table :columns="columns" :data="data" :border="true"></Table>

    JS代码如下:

     export default {
            data(){
                return {
                    columns:[],
                    data:[{name:11111,name2:'加工精度',value:'',key:''}]
                }
            },
            created(){
                this.init();
            },
            methods:{
                init(){
                    let vm = this;
                    this.columns = [
                        {
                            title: '序号',
                            key: 'name'
                        },
                        {
                            title: '检验项名称',
                            key: 'name2'
                        },
                        {
                            title: '检验值',
                            key:'value',
                            render: (h, params) => {
                                return h('Input',{
                                    props:{
                                        type:'text',
                                        value:vm.data[params.index].value //此处如何让数据双向绑定
                                    },
                                    on:{
                                        'on-change':(event) => {
                                            console.log(params)
                                        }
                                    }
                                })
                            }
                        },
                        {
                            title: '检验结论',
                            key:'key',
                            render: (h, params) => {
                                return h('Select',[
                                    h('Option', {
                                        props: {
                                            value: '1',
                                        }
                                    }, '合格'),
                                    h('Option', {
                                        props: {
                                            value: '2',
                                        }
                                    }, '不合格')
                                ]);
                            }
                        },
                    ]
                },
                get(){
                    console.log(this.data)
                }
            }
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 雨洋 普通会员 1楼

      在iView中,我们可以使用render函数来添加一个Input组件,然后通过elInput的value属性来双向绑定数据。以下是一个简单的示例:

      ```html

      ```

      在这个示例中,我们首先在模板中添加了一个el-input组件,然后通过v-model属性绑定了一个inputValue变量。这样,每次inputValue发生变化时,el-input的value属性也会随之变化。

      然后,我们可以在script部分中定义一个inputValue的初始值,例如:

      javascript this.inputValue = '';

      这样,每次输入时,el-input的value属性都会自动设置为这个初始值。

      注意,这只是在双向绑定输入时的一种常见方式。在实际使用中,你可能还需要考虑如何处理用户输入的验证、更新状态等其他情况。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部