iview table选中项显示在上方tag标签并可以取消

iview table选中项显示在上方tag标签并可以取消_第1张图片iview table选中项显示在上方tag标签并可以取消_第2张图片

如图表格多选功能选中项显示在table的上方并且支持跨页,table上方加tag标签


      
        {{ formatTag(item) }}
      
    
    

 table内容就不过多展示,handleClose是tag的叉号icon,点击之后会内部回调一下table的on-select-cancel方法所以需要处理一下

handleClose (event, name) {
      let index = -1
      this.selection.forEach((el, idx) => {
        if (name === el.id) {
          index = idx
        }
      })
      this.selection.splice(index, 1) // 存储被删除的元素数组
      let dataIndex = -1
      this.tableData.forEach((el, idx) => {
        if (name === el.id) {
          dataIndex = idx
        }
      })
      if (dataIndex !== -1) {
        this.tableDataFlag = true
        this.$refs.table.toggleSelect(dataIndex)
      }
    },
unselectRow (selection, row) {
      if (this.tableDataFlag) {
//这里是如果点击tag叉号icon就不执行
        this.tableDataFlag = false
        return true
      } else {
        //这里是点击table多选框控制分页实现逻辑
      }
    },

以上能实现如图功能,欢迎指正

你可能感兴趣的:(view,design,vue.js,table,iview,table,table多选)