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

最新推荐文章于 2024-03-27 14:30:41 发布

Zxiuping

最新推荐文章于 2024-03-27 14:30:41 发布

阅读量679

点赞数

本文链接：https://blog.csdn.net/zxiuping/article/details/131680316

版权

该文描述了如何在Vue.js应用中创建一个表格，实现多选功能，选中的项会显示在table上方的tag标签中，并支持跨页显示。当点击tag的关闭图标时，会触发handleClose事件，调用on-select-cancel方法。同时，文章提到了unselectRow函数，用于处理点击表格多选框时的分页逻辑。

摘要由CSDN通过智能技术生成

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

<span
      class="select_tips"
    >
      <Tag
        v-for="item in selection"
        :key="item.id"
        :name="item.id"
        closable
        @on-close="handleClose"
      >
        {{ formatTag(item) }}
      </Tag>
    </span>
    <Table/>

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多选框控制分页实现逻辑
      }
    },

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