Ant Design Vue设置点击行改变行背景颜色

最新推荐文章于 2024-04-01 21:26:35 发布

原创最新推荐文章于 2024-04-01 21:26:35 发布 · 1.7k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

该段代码展示了如何在AntDesignVue的a-table组件中设置表格行的自定义样式，包括通过getRowClassName方法动态设置行类名，以及通过customRow属性添加行点击事件。同时，代码中还包括了特定列的内容渲染逻辑，如合并运行数和实体数，以及场景和营地设置的显示。此外，还定义了高亮选中行的CSS样式。

<a-table :columns="columns" :data-source="info.data" class="table" :rowClassName="getRowClassName"  :customRow="handleRowClick" :loading="load" style="max-width: 100%;max-height: 100%;" :pagination="false">

      <template v-slot:bodyCell="{ column, record }">

        <template v-if="column.key === 'operation'">

          <i class="iconfont" style="font-size: 18px;" :title="$t('message.edit')" @click="upData(record)">&#xe620;</i>

          <i class="iconfont" style="font-size: 17px;margin-left: 3px;font-weight: bold;" :title="$t('message.detail')"

            @click="showDrawer(record, index)">&#xe8a0;</i>

          <i class="iconfont" style="font-size: 17px;margin-left: 3px;" :title="$t('message.entities')"

            @click.prevent="detail(record, index)">&#xe60f;</i>

          <i class="iconfont" style="font-size: 17px;margin-left: 5px;" :title="$t('message.delete')"

            @click="deleteInstanceFn(record, index)">&#xec7b;</i>

        </template>

        <template v-if="column.key === 'runningNumber'">

          {{ record.runningCount +'/' + record.entityCount }}

        </template>

        <template v-if="column.key === 'sceneSettings'">

          {{ record.sceneSettings.center.longitude }},{{ record.sceneSettings.center.latitude }}

        </template>

        <template v-if="column.key === 'campSettings'">

          {{ record.campSettings }}

        </template>

      </template>

    </a-table>

js代码

a-table中的customRow是行事件，使用的时候要按照文档中的要求写

const selectedRowIndex = ref(null);

    function getRowClassName(record, index) {

      return selectedRowIndex.value === index ? "highlighted-row" : "";

    }

    const handleRowClick = (record, index) => {

      return{

        onclick:(e) => {

          selectedRowIndex.value = index;

        }

   }

      }

样式代码

.highlighted-row {

  background-color: #e6f7ff; /* or any color you like */

}

.ant-table-cell-fix-left, .ant-table-cell-fix-right{

  background: none;

}

.ant-table-tbody{

        > .highlighted-row:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{

        background:none !important;

        }

      }

标签