天天看點

Vue iview table資料操作用下拉框顯示

話不多說,結果顯示圖

Vue iview table資料操作用下拉框顯示

表頭資訊和資料的代碼在之前的部落格

接下來是修改的代碼、

columns:[
          {
          title: "操作",
          fixed: "right",
          key:"number",
          width: 120,
          render: (h, params) => {
            return h(
              "Dropdown",
              {
                on: {
                  "on-click": name => {
                    let rowData = params.row;
                    let id = rowData.id;
                    if(name == 'read'){
                      //一系列操作
                    }else if(name == 'backout'){
                      //一系列操作
                    }else if(name == 'abandon'){
                      //一系列操作
                    }else if(name == 'edit'){
                      //一系列操作
                    }
                  }
                },
                props: {
                  transfer: true
                }
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary"
                    }
                  },
                  "操作>>"
                ),
                h(
                  "DropdownMenu",
                  {
                    slot: "list"
                  },
                  [
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "read"
                        }
                      },
                      "操作1"
                    ),
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "edit"
                        }
                      },
                      "操作2"
                    ),
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "backout"
                        }
                      },
                      "操作3"
                    ),
                    h(
                      "DropdownItem",
                      {
                        props: {
                          name: "abandon"
                        }
                      },
                    "操作4"
                    )
                  ]
                )
              ]
            );
          }
        }
      ]
           

繼續閱讀