前后端分离iview-admin二次开发 tables render switch 修改数据库字段

iview-admin二次开发，表格直接用自带的tables组件
实现效果图

点击后数据库会直接修改认证字段的值

参考

iview table render集成switch开关

一、前端

        {
          title: "是否认证",
          key: "authentication",
          width: "100px",
          render: (h, params) => {
            return h("i-switch", {
              props: {
                value: params.row.authentication === 1,
                size: "large"
              },
              on: {
                "on-change": value => {
                  //触发事件是on-change,用双引号括起来，
                  //参数value是回调值，并没有使用到
                  this.switch(params.index); //params.index是拿到table的行序列，可以取到对应的表格值
                }
              }
            });
          }
        },

方法

    switch(index) {
      //打开是true,已经处理1
      if (this.invoices[index].authentication == 1) {
        axios.get("http://localhost:8080/invoice/updateA0", {
          params: { invoicecodeleft: this.invoices[index].invoicecodeleft }
        });
        this.invoices[index].authentication = 0
      } else {
        axios.get("http://localhost:8080/invoice/updateA1", {
          params: { invoicecodeleft: this.invoices[index].invoicecodeleft }
        });
        this.invoices[index].authentication = 1
      }
    },

invoicecodeleft 是我这个表的主键，根据此字段查找更改

二、后端

    @Update("update invoice set Authentication=0 where InvoiceCodeLeft=#{invoicecodeleft}")
    void updateA0(String invoicecodeleft);

    @Update("update invoice set Authentication=1 where InvoiceCodeLeft=#{invoicecodeleft}")
    void updateA1(String invoicecodeleft);

数据库Authentication为Integer