selection-change效果

selection-change效果指的是当用户在文本编辑器或输入框中选择不同的文本时，触发的事件。这个事件可以用来实现一些特定的功能，比如根据用户选择的文本进行搜索、替换、格式化等操作。在前端开发中，常用的框架和库都提供了相应的API来监听selection-change事件，以便开发者可以方便地实现这些功能。

相关问题

@selection-change 高亮选中行

### 实现选中行高亮显示

为了实现表格或列表中的选中行高亮显示功能，通常可以通过监听特定事件并动态修改样式来完成。对于前端开发而言，在Vue.js框架下使用`@selection-change`事件处理函数是一个常见的方式。

当用户点击某一行时触发该事件，并通过改变这一行对应的DOM元素的class属性达到视觉上的突出效果。下面给出一段基于Vue.js环境下的简单实例代码：

<template>
  <div id="app">
    <!-- 表格组件 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' }
      ],
      selectedRowKeys: [] // 存储被选中项key值数组
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRowKeys = selection.map(item => item.date); // 假设每一行都有唯一键'date'
    }
  }
};
</script>

<style scoped>
/* 高亮样式 */
.el-table .highlight-row {
  background-color: #f0f9eb !important;
}
</style>

在此基础上还需要进一步调整CSS以确保只有当前选中的那一行会被应用特殊的背景颜色。可以在`handleSelectionChange()`方法内部添加逻辑判断哪些行应该获得`.highlight-row`类名[^1]。

<el-table ref="myTable" :data="treeData" row-key="id" @selection-change="handleSelectionChange">加上一个加载动画

在Vue.js中，如果你想在`el-table`加载数据时添加一个加载动画效果，可以考虑使用`<transition>`或者第三方库如`vue-loading-circular`。这里我会给出一种简单的方法，利用`<template slot-scope="{row}">`和`v-if`来实现。

首先，在模板中引入一个占位的加载图标，例如使用`element-loading-spinner`组件：

<template>
  <el-loading :visible="isLoading" class="loading-mask" :text="loadingText">
    <div>
      <el-table
        ref="myTable"
        :data="treeData"
        row-key="id"
        selection-mode="multiple"
        @selection-change="handleSelectionChange">
        <!-- ... -->
      </el-table>
    </div>
  </el-loading>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 你的表格数据
      isLoading: false,
      loadingText: '正在加载数据...', // 加载提示文字
    };
  },
  methods: {
    handleSelectionChange() {
      // ... 处理选中事件
    },
    fetchData() { // 模拟异步加载数据
      this.isLoading = true;
      setTimeout(() => {
        this.treeData = ...; // 数据加载完成后的结果
        this.isLoading = false;
      }, 1500); // 1.5秒模拟延迟
    },
  },
  mounted() {
    // 初始化加载数据
    this.fetchData();
  },
};
</script>

在这个例子中，当`fetchData`函数被调用时，`isLoading`会被设置为`true`，显示加载动画。数据加载完成后，再将其设置回`false`，隐藏加载动画。