页面模块怎么获取VUE组件的input值

用的是antd.我在页面模板的table的columns上用scopedSlots: { customRender: 'edit' }把table columns下的td中都插入了插槽,插槽中定义了自定义组件,点击td,就会把input渲染出来。input输入的值,会传给组件的value,求大神给个思路,想请教的是我现在页面上有很多td,每个td里面有自定义组件。我怎么把这些td中组件的value值都获取到,整合起来,多谢大神们

    <a-table

:columns="columns"

:data-source="data"

bordered>

<template slot="edit" slot-scope="text, record">

//table columns用scopedSlots: { customRender: 'edit' }绑定插槽

<div v-if="!record.progressstatus" >{{ text }}</div>

<div v-if='record.progressstatus'>

//根据td data的progressstatus属性判断是否渲染div

<edit :text="text" /> //edit自定义组件

</div>

</template>

</a-table>

//edit自定义组件

const edit = {

template: `

<div class="editable-cell" @click="edit">

<div v-if="editable" >

<a-input :value="value" @change="handleChange" @pressEnter="check" />

</div>

<div v-else >

{{ value }}

</div>

</div>

`,

props: {

text: null

},

data () {

return {

value: this.text,

editable: false

}

},

methods: {

handleChange (e) {

const value = e.target.value

this.value = value

},

check () {

this.editable = false

// this.$emit('change', this.value);

},

edit () {

this.editable = true

}

}

}

回答

<edit :text="text"> 这个edit组件不必要,加上反而多增加父子组件通信交互;
// 把值保存在record中, record就是表格行数据
// 另外还需要增加一个按钮或者单击行来控制input显示与隐藏(见下图)
// 输入框输入内容后可以通过增加按钮来控制是否保存,也可用相关事件来控制
// 仅供参考

<a-table

:columns="columns"

:data-source="data"

bordered>

<template slot="edit" slot-scope="text, record">

<div v-if="!record.progressstatus" >{{ text }}</div>

<div v-if='record.progressstatus'>

<!-- 把值保存在record中, record就是表格行数据 -->

<Input :value="text" class="form-label" style="width: 70%"

@change="e => handleChange(e.target.value, record)"

@pressEnter="check" />

</div>

</template>

</a-table>

handleChange(value, record) {

this.$set(record,'text', value)

},

check(){

// todo

},

image.png
image.png

<div v-if="editable" >

<a-input :value="value" @change="handleChange" @pressEnter="check" />

</div>

你先解决两个问题:
1,“value” 是否受控?如果受控,那你准备怎么改写value?(看看你的“change”);
2,“pressEnter”可以做什么?能不能拿到this.value?

以上是 页面模块怎么获取VUE组件的input值 的全部内容, 来源链接: utcz.com/a/36628.html

回到顶部