为什么我写的render函数不起作用

是这样的,用的iview-admin,我写了一个render函数,想把table的一行内容做成可编辑的。

`

   <Button @click="addLine" type="primary">添加一行</Button>
   <Drawer title="新增"
        v-model="value1"
        width="700"
        :mask-closable="false"
        :styles="styles"
    >
    <Form :model="formData">
      <Row :gutter="32">
        <Col span="10">
          <FormItem label="产品编码" label-position="top">
            <Input v-model="formData.productCode" placeholder="请填写" />
          </FormItem>
        </Col>
      </Row>
      <Table :columns="monthColumns" :data="salesList"/></Table>
    </Form>
    <div class="demo-drawer-footer">
      <Button type="primary" @click="drawerSubmit">保存</Button>
      <Button style="margin-right: 8px" @click="value1 = false">取消</Button>
    </div>
  </Drawer>
  `
  要调用的方法
  `addLine () {
  this.value1 = true
  axios.request({
    method: 'post',
    url: 'salesPlan/getMonthList'
  }).then(res => {
    let columnList2 = res.data.body
    console.log(columnList2)
    for (let i = 0; i < columnList2.length; i++) {
      columnList2[i].render = (h, params) => {
        return h('Input', {
          props: {
            type: 'text',
            placeholder: '请填写',
            value: this.columnList2[params.index].key
          },
          on: {
            'on-change': (event) => {
              // params.row.time1 = event.target.value
              // this.salesList[params.index] = params.row
              console.log(event)
            }
          }
        })
      }
    }
    this.monthColumns = columnList2
  })

}

  `

默认这个抽屉Drawer是隐藏的,然后,我想点击添加一行的时候,调用addLine方法,把抽屉显示出来,然后把列的信息从后台取出来,然后再渲染render函数,把这个单元格改成可以编辑的input。

但是现在列的信息都没问题,就是render函数完全不起作用,也没有报错,显示的就是这个样子。
image.png

还望各位大佬赐教,谢谢。

阅读 3.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题