首页 > 其他分享 >vue3 elementplus 列表中添加排序功能,移动的时候修改背景色

vue3 elementplus 列表中添加排序功能,移动的时候修改背景色

时间:2023-09-14 17:34:51浏览次数:69  
标签:index elementplus const 排序功能 branchTableData splice vue3 selectedIndex any

 <el-table
            size="medium"
            :border="true"
            :data="branchTableData"
            :row-style="changeColor"
            :stripe=false
            style="width: 100%;">
            <el-table-column  type="index" label="NO." align="center" width='55px'/>
            <el-table-column prop="customerName" label="所属客户"   />
            <el-table-column prop="branchName" label="网点名称" />
            <el-table-column prop="note" label="备注"/>
            <el-table-column  label="操作" width="150px">
              <template #default="scope">
                <el-popconfirm :title="`确定删除这条记录吗`" width="260px" @confirm="delBranch(scope.row)">
                  <template #reference>
                    <el-button type="danger" title="删除" icon="Minus" size="small" circle plain></el-button>
                  </template>
                </el-popconfirm>
                <el-button  type="primary" title="上移" icon="ArrowUpBold" size="small"  circle plain  :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)" />
                <el-button  type="success" title="下移" icon="ArrowDownBold" size="small"  circle plain :disabled="scope.$index === branchTableData.length -1 "  @click="moveDown(scope.$index, scope.row)"  />
              </template>
            </el-table-column>
          </el-table>

  二、具体方法

// 排序上移
const moveUp =(index:any,row:any) =>{
  if(index > 0){
    const up = branchTableData[index-1]
    branchTableData.splice(index-1,1);
    branchTableData.splice(index,0,up);
    selectedIndex.value = index-1;
  }else{
    ElMessage({message:'当前网点已是第一个,不可上移!',type:'warning'})
  }
}
// 排序下移
const moveDown =(index:any,row:any) =>{
  if(index + 1 === branchTableData.length){
    ElMessage({message:'当前网点已是最后一个,不可下移!',type:'warning'})
  }else{
    const down = branchTableData[index+1]
    branchTableData.splice(index+1,1);
    branchTableData.splice(index,0,down);
    selectedIndex.value = index+1;
  }
}
const selectedIndex=ref();
const changeColor =({ row,rowIndex }) =>{
  if(rowIndex === selectedIndex.value){
    return {'background-color':'#a0cfff', 'font-weight':'bold'}
  } 
  if(rowIndex % 2 === 0){
     return {'background-color':'#fff'}
  }
  else{
    return {'background-color':'#fafafa'}
  }
}

  

标签:index,elementplus,const,排序功能,branchTableData,splice,vue3,selectedIndex,any
From: https://www.cnblogs.com/flyShare/p/17702960.html

相关文章

  • vue3项目 基于vuedraggable插件实现拖拽上下移动
    //父页面<template><divclass="main_body"><blockTitletitle="事件详情"/><a-formref="formRef":model="formValue"style="width:100%"class="form_bo......
  • 万字长文带你全面掌握Vue3
    在2020年9月19日,vue更新了3.0的正式版,不知不觉,已经过去了好几个月了,作为一位前端切图仔,是时候开始学习了,每次抱着准备学、再等等、明天说的想法,成功在发布了两个多月的时候来认真学习了一波,这里来总结一下vue3到底有哪些更新,来帮各位没有时间去了解vue3的朋友来一次快速入门。如何......
  • Vue3语法基本使用
    1、watch使用watch(监听数据源,执行函数,[配置参数])//配置参数:立即执行深度监听{immediate:true,deep:true}1.1监听基本数据类型单一数据源<scriptsetup>import{ref,watch}from'vue'letname=ref('张麻子')//监听器watch(name,(new......
  • Vue~vue3-sfc-loader用法
    1.vue2-sfc-loader版本参考这个:(vue2&vue2-sfc-loader)https://article.juejin.cn/post/72369546129882972742.vue3-sfc-loader版本的基础写法:(vue3&vue3-sfc-loader)<template><div><component:is="data.remote"v-if="data.remote&q......
  • OpenTiny Vue组件库实现跨框架(vue2、vue3、react、solid)
    本文由TinyVue组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。前言前端组件库跨框架是什么?前端组件库跨框架是指在不同的前端框架(如React、Vue、Solid等)之间共享和复用组件的能力。这种能力可以让......
  • vue3.*安装axios具体步骤
    在项目的命令行处使用命令进行axios的安装npminstallaxiosvue-axios--legacy-peer-deps--save其余的命令可能会报错;......
  • Vue3中使用pinia全局状态管理库
    ❝本期介绍一下pinia在vue3中的简单使用,以及如何使用pinia实现多页面状态共享。❞什么是piniaPinia是一个用于Vue应用程序的轻量级状态管理库。与vuex的区别pinia是vue3的官方状态管理库,vuex是vue2的官方状态管理库pinia更加轻量级pinia能更好的配合Vue3与TSpinia的使用比Vuex简......
  • Taro+vue3 关注抖音号
     Taro使用vue3或者react框架,data-aweme-id属性是不被解析到生成的页面代码中的,所以需要借助编译插件@tarojs/plugin-inject去注入标签属性;https://taro-docs.jd.com/docs/vue-overall#dataset业务页面:<buttonopen-type="openAwemeUserProfile":dataAwemeId="awemeId">关注......
  • Vue3入门学习---指令篇
    前言Vue3是一款非常流行的JavaScript框架,它提供了很多的指令来方便我们进行开发。在本篇博客中,我们将详细介绍Vue3的指令,让大家更好地了解这款框架的强大之处。正文开始1.v-bind指令v-bind指令用于绑定数据到DOM元素上,可以绑定任何JavaScript表达式。在Vue3中,我们可以使用简写......
  • 创建vue3的项目和目录结构讲解
    本节目标了解Vue3项目的结构学习Vue3项目的基本开发知识Vue3和Vue2的开发区别全局安装vue-clinpmi-g@vue/clivuecreatevue3-json-schema-form自定义vue3配置自定义配置:选择[自定义],通过方向键上下移动,空格选中,Enter确定,自定义配置中,您将会看到这些配置......