vue-table列中嵌套input和select时,输入时失去焦点

table定义:

<Table height="385" border :columns="fieldDetailColumns1" :data="fieldDetailList1" ></Table>

data中写上:

data() {
    let t = this;
    return {
      fieldDetailList1: [],
      fieldDetailColumns1: [
        {
          title: "字段英文名",
          align: "left",
          width: 120,
          key: "colEnName"
        },
        {
          title: "字段中文名",
          align: "center",
          width: 120,
          key: "colCnName",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: params.row.colCnName
              },
              domProps: {
                title: params.row["colCnName"]
              },
              on: {
                "on-blur": event => {
                  t.fieldDetailList1[params.index].colCnName =
                    event.target.value;
                }
              }
            });
          }
        },
        {
          title: "是否主键",
          width: 100,
          align: "center",
          key: "ifKey",
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: params.row.ifKey
                },
                on: {
                  "on-change": event => {
                    t.fieldDetailList1[params.index].ifKey = event;
                  }
                }
              },
              [
                h(
                  "Option",
                  {
                    props: {
                      value: "Y"
                    }
                  },
                  "是"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: "N"
                    }
                  },
                  "否"
                )
              ]
            );
          }
        }
      ]
    };
  }

使用时,fieldDetailList1即会自动更新为输入的数据。

关键是input的on-blur事件和select的on-change事件,以作记录。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值