iview 用render渲染radio無法選中問題

最新推荐文章于 2024-05-09 11:50:47 发布

原创最新推荐文章于 2024-05-09 11:50:47 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了在使用iview框架时遇到的使用render方法渲染radio组无法正常选中的问题，以及如何通过将props中的v-model替换为value属性来解决这个问题。

描述:刚开始在渲染radiogroup时,在props里面使用了v-model实现数据的双向绑定,结果不行,后来改为value即可.

js:

{
                        title: "group",
                        key: "a",
                        render: (h, params) => {
                          return h("div", {
                              style:{
                                marginLeft:'50px'
                              }
                          }, [
                            
                            h(
                              "div",
                              {
                                style: {
                                  "margin-top": "10px",
                                  display: "inline-block",
                                  "font-size": "14px",
                                }
                              },
                              "顆粒度:"
                            ),
                            h(
                              "RadioGroup",
                              {
                                props: {
                                  value: this.radioValue
                                },
                                on: {
                                  "on-change":(val) => {
                                    this.radioValue = val;
                                    console.log(val, "dsadsadadadaddad",this.radioValue);
                                  }
                                }
                              },
                              [
                                h("Radio", {
                                  style: {
                                    display: "inline-block",
                                    "font-size": "14px",
                                    "margin-left": "20px"
                                  },
                                  props: {
                                    label: "天",
                                    // value:'day'
                                  }
                                }),
                                h("Radio", {
                                  style: {
                                    display: "inline-block",
                                    "font-size": "14px"
                                  },
                                  props: {
                                    label: "周",
                                    // value:'week'
                                  }
                                }),
                                h("Radio", {
                                  style: {
                                    display: "inline-block",
                                    "font-size": "14px"
                                  },
                                  props: {
                                    label: "月",
                                    // value:'month'
                                  }
                                }),
                                h("Radio", {
                                  style: {
                                    display: "inline-block",
                                    "font-size": "14px"
                                  },
                                  props: {
                                    label: "季度",
                                    // value:'quarter'
                                  }
                                }),
                                h("Radio", {
                                  style: {
                                    display: "inline-block",
                                    "font-size": "14px"
                                  },
                                  props: {
                                    label: "年",
                                    // value:'year'
                                  }
                                })
                              ]
}

结果: