Acro Design Pro vue - table 行点击高亮显示

在使用element的时候，好像只用在table中添加一个 highlight-current-row 就可以当前行高亮。
acro table没找到这属性，可以使用 row-class 动态添加样式实现。

// template<a-table:columns="columns":data="userTableData"column-resizable:hoverable="false":scroll="scrollPercent":loading="loading"row-key="id":bordered="{ cell: true }":size="size":pagination="PaginationProps":row-class="activeRowClass"   @page-change="changeTablePageClick"@row-click="handelClickTableRow">// scriptconst activeRow = ref({});const handelClickTableRow = (e) => {activeRow.value = e;};const activeRowClass = (record) => {return record.raw.id === activeRow.value.id ? 'activeRowLight' : '';};// style <style lang="less" scoped>:deep(.arco-table-td) {background: unset;}</style>

为了避免一些奇怪的问题，所以将 activeRowLight 的样式放到 app.vue 中，相当于公共样式。要注意的是开始设置的时候，虽然类名已经添加到了DOM上，但样式并未生效，后查看到每个 td 都有自己的背景色，所以上面将每个td 的背景色去掉之后，咱自己添加的背景色就显示出来了。然后hoverable的时候也会遮盖咱的背景色，这里就给设置取消了。

<template><a-config-provider :locale="locale" :size="size"><router-view /><global-setting /></a-config-provider>
</template><script lang="ts" setup>import { computed } from 'vue';import enUS from '@arco-design/web-vue/es/locale/lang/en-us';import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';import GlobalSetting from '@/components/global-setting/index.vue';import useLocale from '@/hooks/locale';import { useAppStore } from '@/store';const { currentLocale } = useLocale();const locale = computed(() => {switch (currentLocale.value) {case 'zh-CN':return zhCN;case 'en-US':return enUS;default:return enUS;}});const size = computed(() => {const userCofig = useAppStore();return userCofig.size;});
</script><style>.activeRowLight {background: #b8d4ff;}
</style>

Acro Design Pro vue - table 行点击高亮显示相关推荐

ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
Ant Design Pro Vue 登录后userInfo存在vuex问题
问题描述: 作者发现使用Ant Design Pro中存在一个问题,页面刷新后vuex数据丢失,导致UserInfo找不到影响页面的问题,故而写此文,望能助有需之人. 原因分析: 提示:Vuex的机制 ...
Ant Design Vue table表格点击行选中多选框
参考官方文档,实现点击行选中前边的多选框 <template><div><a-table :rowSelection="{selectedRowKeys: se ...
layui table行点击tr_LayUI数据表格行单击事件中选中
2019年9月5日11:19:17 实现思路直接修改复选框选中状态和伪复选框(DIV)Class 但是调用checkStatus获取不到选中的行查看底层源代码checkStatus方法的实现是缓存 ...
layui table行点击tr_layui的table单击行勾选checkbox功能方法
如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table t ...
Ant Design Pro 项目图表组件点击事件
背景:使用框架配套图表组件charts 要求柱形图可实现点击事件方法:onReady 官网:https://charts.ant.design/zh/docs/api/options/events ...
【Ant Design Pro 四】react 点击事件传参
简单的绑定点击事件传参: 点击事件 function myClick(){console.log('点击')}return (<Button onClick={myClick}>点击< ...

Acro Design Pro vue - table 行点击高亮显示

Acro Design Pro vue - table 行点击高亮显示相关推荐

最新文章

热门文章