ant-desgin的table的上移、下移

发布时间:2024年01月18日

文章目录

html部分

<a-table :columns="columns" :data-source="dataList" :loading="listLoading" :pagination="false">
  <template #bodyCell="{ column, record, index }">
    <template v-if="column.key === 'action'">
      <span class="space-x-4">
        <a-button type="link" @click="up(index)">上移</a-button>
        <a-button type="link" @click="down(index)">下移</a-button>
      </span>
    </template>
  </template>
</a-table>

函数部分

dataList 是table的接口返回数据

// 上移判断
const up = (index) => {
  if (index > 0) {
    const temp = dataList.value[index - 1]
    dataList.value[index - 1] = dataList.value[index]
    dataList.value[index] = temp
  }
  else {
    message.warning('已经是第一条数据,不可上移')
  }
}
// 下移判断
const down = (index) => {
  if (index === dataList.value.length - 1) {
    message.warning('已经是最后一条数据了,不可下移')
  }
  else {
    const temp = dataList.value[index + 1]
    dataList.value[index + 1] = dataList.value[index]
    dataList.value[index] = temp
  }
}

结果:
下移效果:
在这里插入图片描述
被下移了
在这里插入图片描述

文章来源:https://blog.csdn.net/wang13679201813/article/details/135674652
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。