Vue.js + Element UI：揭秘互动式表格的行高亮技巧

2023-09-13 13:03:07

引言

在日常开发中，我们经常需要在表格中实现行高亮的效果，例如在点击操作按钮时高亮显示相应的行，以便用户能够快速识别当前操作的对象。Vue.js作为前端开发的热门框架，凭借其强大的功能和丰富的生态系统，为我们提供了诸多便捷的开发工具和组件库，而Element UI则是Vue.js中最受欢迎的组件库之一。Element UI提供了丰富的UI组件，包括表格组件，使我们能够轻松实现各种交互式表格效果。

实现步骤

准备工作

首先，我们需要在项目中安装Vue.js和Element UI。可以通过以下命令进行安装：
```
npm install vue element-ui
```
安装完成后，在项目中引入Vue.js和Element UI：
```
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
```

创建表格组件

接下来，我们需要创建一个表格组件，并在其中使用Element UI的Table组件。Table组件提供了丰富的功能和配置选项，使我们能够轻松实现各种表格效果。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="operation" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleOperation(scope.row)">操作</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn, ElButton } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市海淀区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 40, address: '广州市天河区' }
      ]
    }
  },
  methods: {
    handleOperation(row) {
      console.log(row)
    }
  }
}
</script>

实现行高亮效果

为了实现行高亮的交互效果，我们需要在表格组件中添加一些额外的逻辑。当用户点击操作按钮时，我们需要为当前行添加一个CSS类，以使其突出显示。同时，当用户点击表格的其他区域时，我们需要移除该CSS类，以取消高亮。

<template>
  <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="operation" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleOperation(scope.row)">操作</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn, ElButton } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市海淀区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 40, address: '广州市天河区' }
      ],
      currentRow: null
    }
  },
  methods: {
    handleOperation(row) {
      console.log(row)
    },
    handleRowClick(row) {
      if (this.currentRow === row) {
        this.currentRow = null
      } else {
        this.currentRow = row
      }
    }
  }
}
</script>

<style>
  .el-table__row--highlight {
    background-color: #f5f5f5;
  }
</style>