ant vue 表格项上下移动功能

感谢大佬的代码。

<a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowClassName="rowClassName"
          @change="handleTableChange"
        >

        <span slot="action" slot-scope="text, record, index">
          <a @click="handleEdit(routerId,record)">编辑a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除a>
          a-popconfirm>
           <a-divider type="vertical" />
              <a @click="arrowUp(text,record,index)">向上a>
          <a-divider type="vertical" />
              <a @click="arrowDown(text,record,index)">向下a>
        span>
        a-table>

js

methods: {
        arrowUp(text,record,index){
            if (index<=0){
              alert("已经是第一条了");
            } else{
              let upData = this.dataSource[index - 1]
              this.dataSource.splice(index - 1,1)
              this.dataSource.splice(index,0,upData)
            }
        },
        arrowDown(text, value,index){
          if(index === this.dataSource.length - 1){
              alert("已经是最后一条了")
          } else{
              let downData = this.dataSource[index + 1]
              this.dataSource.splice(index + 1,1)
              this.dataSource.splice(index,0,downData)
          }
        },

此处dataSource为表格的数据源,按需修改。

你可能感兴趣的:(实现功能,vue)