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事件,以作记录。

Logo

前往低代码交流专区

更多推荐