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

发布于 2022-09-12 03:57:30 字数 1472 浏览 10 评论 0

用的是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
    }
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

违心° 2022-09-19 03:57:30

<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

回忆凄美了谁 2022-09-19 03:57:30
<div v-if="editable" >
          <a-input :value="value" @change="handleChange"       @pressEnter="check" />
        </div>

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文