vue 表格数据上下移动并增加背景色

薄伽丘

于 2024-07-18 02:49:08 发布

阅读量40

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

在Vue中实现表格数据上下移动并添加背景色，可以通过操作数组来重新排序表格行，并使用计算属性或方法来为特定条件设置背景色。以下是一个简单的示例：

<template>
   <div>
     <table>
       <thead>
         <tr>
           <th>序号</th>
           <th>名称</th>
           <th>操作</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item, index) in items" :key="item.id" :style="{ background: getRowBackground(index) }">
           <td>{{ index + 1 }}</td>
           <td>{{ item.name }}</td>
           <td>
             <button @click="moveUp(index)" :disabled="index === 0">上移</button>
             <button @click="moveDown(index)" :disabled="index === items.length - 1">下移</button>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
  
 <script>
 export default {
   data() {
     return {
       items: [
         { id: 1, name: 'Item 1' },
         { id: 2, name: 'Item 2' },
         { id: 3, name: 'Item 3' },
         // ...
       ]
     };
   },
   methods: {
     moveUp(index) {
       if (index > 0) {
         const temp = this.items[index];
         this.$set(this.items, index, this.items[index - 1]);
         this.$set(this.items, index - 1, temp);
       }
     },
     moveDown(index) {
       if (index < this.items.length - 1) {
         const temp = this.items[index];
         this.$set(this.items, index, this.items[index + 1]);
         this.$set(this.items, index + 1, temp);
       }
     }
   },
   computed: {
     getRowBackground() {
       // 根据需要设置特定行的背景色，例如：选中行或其他条件
       return (index) => {
         // 假设我们将第一行和最后一行设置为特殊颜色
         if (index === 0 || index === this.items.length - 1) {
           return '#ffcc00'; // 黄色背景
         }
         return ''; // 默认背景色
       };
     }
   }
 };
 </script>