使用render实现v-model与多个slot分发

LeexMuller 发布于2019-08-22 16:41 / 3130人阅读

摘要：使用函数实现表格与表单之间的双向绑定以及表格中使用分发多个，分发不同的内容。主要思路通过给表单组件的进行赋值，之后通过等元素监听事件，进行取值，然后通过表格当前行索引对表格相应元素进行赋值。

使用render函数实现表格与form表单之间的双向绑定以及表格中使用slot分发（多个slot，分发不同的内容）。

主要思路

通过props给表单组件的value进行赋值，之后通过change、blur等元素监听事件，进行取值，然后通过表格当前行索引对表格相应元素进行赋值。这样就完成了一个数据的双向绑定了。

我这边使用的是ivewUI组件库

在表格中对一个input实现双向绑定

{
  title: "姓名",
  key: "name",
  render: (h, params) => {
    let self = this;
    return h("div", [
      h("Input", {
        props: {
          placeholder: "请输入....",
          value:params.row.name
        },
        "on": {
          "on-blur":() => {
            self.data1[params.index].name = event.target.value
          }
        },
      }),
      h("p",{
        style: {
          color: "red",
          display: self.data1[params.index].name === "" ? "" : "none"
        }
      },"请输入你的名字....")
    ]);
  }
}

在表格中对一个select实现双向绑定

{
  title: "性别",
  key: "sex",
  render: (h, params) => {
    let self = this;
    const sexList = [
      {name:"男",value:1},
      {name:"女",value:2}
    ]
    return h("Select",{
      props:{
        value:params.row.sex
      },
      on :{
        "on-change" : (val) => {
          self.data1[params.index].sex = val;
        }
      }
    },sexList.map(item => {
        return h("Option",{
          props:{
            value: item.value,
          }
        },item.name)
      })
    )
  }
}

在表格中对一个switch实现双向绑定，外加slot

{
  title: "switch开关slot实现",
  key: "switchSlot", 
  renderHeader(h, params) {
    return h("Tooltip", {
      props: {
        placement: "right",
        content: "switch开关"
      }
    },"switch开关slot实现")
  },
  render: (h, params) => {
    let self = this;
    const switchList = [
      {
        slot: "open",
        name: "打开"
      },
      {
        slot: "close",
        name: "关闭"
      }
    ]
    return h("i-switch",{
      props: {
        size: "large",
        value: params.row.switchSlot
      },
      on: {
        "on-change" : (val) =>{
          self.data1[params.index].switchSlot = val;
        }
      }
    // 这样我们就可以在表格中完美的实现多个slot分发了
    },switchList.map(item => {
      return h("span",{
        slot:item.slot
      },item.name)
    }))
  }
}

注意

对表格数据进行双向绑定时，不建议直接更改源数据源，可以copy出一份临时数据源，在做相应修改操作时对临时数据源进行更改，这样可以大大减少对dom的渲染，在需要的时候再将临时数据源提交到主数据源就可以了。

结尾

如果觉得render写起来很烦的话，可以使用jsx，会大大减少代码量0.0
源码地址

云服务器 GPU云服务器 cdn内容分发如何实现梦幻二级域名分发怎么使用静态资源使用cdn进行服务分发多个cdn使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94565.html

Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
Vue-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-com...

dadong 2019-08-26 12:00 评论0 收藏0
封装Vue组件的一些技巧

摘要：根据组件单向数据流和和事件通信机制，需要由子组件通过事件通知父组件，并在父组件中修改原始的数据，完成状态的更新。本文同步在个人博客shymean.com上，欢迎关注写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹...

韩冰 2019-05-23 17:35 评论0 收藏0
Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0
聊一聊我对 React Context 的理解以及应用

摘要：假如以的作用域链作为类比，组件提供的对象其实就好比一个提供给子组件访问的作用域，而对象的属性可以看成作用域上的活动对象。所以，我借鉴了作用域链的思路，把当成是组件的作用域来使用。前言 Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方...

chengjianhua 2019-08-26 11:48 评论0 收藏0