el-table点击某一行高亮并显示小圆点的实现代码

为了实现“el-table点击某一行高亮并显示小圆点”的效果，我们可以使用Vue的指令和事件等相关机制来实现：

1. 安装`element-ui`

在开始之前，我们需要先安装并引入element-ui库，可以通过npm或者yarn来进行安装：

# 使用npm进行安装
npm install element-ui --save

# 使用yarn进行安装
yarn add element-ui

接着，在项目入口处（一般是main.js文件）引入element-ui的CSS和JS：

// main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

安装并引入成功后，我们就可以开始实现“el-table点击某一行高亮并显示小圆点”的效果：

2. 编写模板代码

首先，我们需要创建一个表格组件，并在数据列表tableData中添加一列isActive，该列用于标记该行当前是否处于激活状态。

<template>
  <el-table :data="tableData" highlight-row>
    <el-table-column label="日期" prop="date"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="地址" prop="address"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click.prevent.stop="handleClick(scope.$index, scope.row.isActive)">点击</el-button>
        <el-tooltip :open-delay="800" content="i am tooltip" placement="top">
          <i :class="{'el-icon-circle-check': scope.row.isActive}"></i>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三', address: '北京市', isActive: false },
        { date: '2021-01-02', name: '李四', address: '上海市', isActive: false },
        { date: '2021-01-03', name: '王五', address: '广州市', isActive: false },
        { date: '2021-01-04', name: '赵六', address: '深圳市', isActive: false },
      ],
      activeIndex: null,
    };
  },
  methods: {
    handleClick(index, isActive) {
      // 如果该行已被激活，则取消激活状态；否则激活该行。
      this.tableData[index].isActive = !isActive;
      this.activeIndex = isActive ? null : index;
    },
  },
};
</script>

在上述代码中，我们使用了highlight-row指令来实现点击行高亮的效果；每一行都会渲染一个el-button组件和一个el-tooltip组件，用于触发handleClick方法并显示小圆点。

handleClick方法用于处理行的激活状态，每次点击时都会切换该行的激活状态，并记录激活行的索引值activeIndex。

接下来，我们需要为激活的行添加样式，以便实现高亮的效果：

.table-highlight .el-table__body > tbody > tr.active-row td {
  background-color: #f5f7fa;
}

最后，在表格的根元素上添加.table-highlight类名，并给每一行绑定一个active-row样式类，我们就可以实现“el-table点击某一行高亮并显示小圆点”的效果了：

<template>
  <div class="table-highlight">
    <el-table :data="tableData" highlight-row>
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.prevent.stop="handleClick(scope.$index, scope.row.isActive)">点击</el-button>
          <el-tooltip :open-delay="800" content="i am tooltip" placement="top">
            <i :class="{'el-icon-circle-check': scope.row.isActive}"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三', address: '北京市', isActive: false },
        { date: '2021-01-02', name: '李四', address: '上海市', isActive: false },
        { date: '2021-01-03', name: '王五', address: '广州市', isActive: false },
        { date: '2021-01-04', name: '赵六', address: '深圳市', isActive: false },
      ],
      activeIndex: null,
    };
  },
  methods: {
    handleClick(index, isActive) {
      // 如果该行已被激活，则取消激活状态；否则激活该行。
      this.tableData[index].isActive = !isActive;
      this.activeIndex = isActive ? null : index;
    },
  },
};
</script>

<style scoped>
.table-highlight .el-table__body > tbody > tr.active-row td {
  background-color: #f5f7fa;
}
.active-row {
  cursor: pointer;
}
</style>

下面是另一个示例，使用vue.js+element-ui+vue-router4.x开发一个有主从数据关系的菜单管理系统：

<template>
  <div class="menu-manage" :style="{ width: $device.isDesktop ? 'calc(100% - 200px)' : '100%' }">
    <!-- 左侧菜单目录 -->
    <el-menu
      :default-active="$router.currentRoute.path"
      @select="$router.push"
      router
      background-color="#fff"
      text-color="#333"
      :collapse="$device.isDesktop ? $route.meta.collapse : false"
      :unique-opened="$device.isDesktop"
      :default-openeds="$route.matched.length > 2 ? ['/' + $route.matched.slice(2).map(item => item.path).join('/')] : []"
      class="menu-manage-left">
      <template v-if="$device.isDesktop">
        <el-menu-item
          v-for="menu in menus"
          :index="menu.path"
          :key="menu.id"
          :class="[menu.children && menu.children.length ? 'menu-manage-left-item-haschild' : '']">
          <i :class="menu.icon"></i>
          <span v-text="menu.name"></span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-cascader-panel v-model="cascaderValue" :options="options"></el-cascader-panel>
      </template>
    </el-menu>
    <!-- 右侧主要内容 -->
    <div class="menu-manage-right">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu, ElCascaderPanel } from 'element-plus';
import { getMenuList } from '@/api/user';

export default {
  name: 'MenuManage',
  components: {
    [ElMenu.name]: ElMenu,
    [ElMenuItem.name]: ElMenuItem,
    [ElSubmenu.name]: ElSubmenu,
    [ElCascaderPanel.name]: ElCascaderPanel,
  },
  data() {
    return {
      menus: [],
      cascaderValue: [],
      options: [],
    };
  },
  mounted() {
    this.initMenuList();
  },
  computed: {
    deviceType() {
      return this.$device.type;
    },
  },
  watch: {
    cascaderValue: {
      handler(newVal) {
        const path = newVal.map(item => item.path).join('/');
        this.$router.push(`/${path}`);
      },
      deep: true,
    },
  },
  methods: {
    async initMenuList() {
      try {
        const result = await getMenuList();
        this.menus = this.buildMenuTree(result.data);
        this.buildCascaderOptions(this.menus);
      } catch (error) {
        this.$message.error(error.message || '菜单列表数据获取失败！');
      }
    },
    buildMenuTree(data) {
      // TODO: 将列表数据构造成树形结构
    },
    buildCascaderOptions(data) {
      // TODO: 将树形结构的菜单数据构造成ElCascaderPanel组件的选项数据
    },
  },
};
</script>

<style scoped lang="scss">
.menu-manage {
  height: 100%;

  .menu-manage-left {
    height: 100%;
    overflow-y: auto;

    .menu-manage-left-item-haschild.is-active {
      background-color: #f0f2f5;

      > i,
      > span {
        color: #409eff;
      }
    }
  }

  .menu-manage-right {
    height: calc(100% - 50px);
    padding: 20px;
  }
}
</style>

在上面的示例代码中，我们使用element-ui的ElMenu组件作为左侧的菜单目录；通过router选项实现路由的跳转，使用@select事件监听菜单项的激活状态并进行路由的跳转；在手机端通过ElCascaderPanel组件来渲染菜单目录，并使用watch监听cascaderValue数组的变化，通过$router.push方法实现路由的跳转。

此外，我们还使用了组件的混入选项$device，根据设备类型动态设置菜单的折叠和开启状态、右侧宽度，并使用keep-alive组件缓存已加载的页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：el-table点击某一行高亮并显示小圆点的实现代码 - Python技术站

el-table点击某一行高亮并显示小圆点的实现代码

1. 安装element-ui

2. 编写模板代码

相关文章

1. 安装`element-ui`