vue-table设置行高亮

最新推荐文章于 2024-07-11 18:02:52 发布

小前端

最新推荐文章于 2024-07-11 18:02:52 发布

阅读量206

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45041493/article/details/139991426

版权

vxe-table 设置高亮行
在VXE-Table中，要设置高亮行，可以使用highlight-current-row属性。当这个属性被设置为true时，表格会高亮当前活跃的行。

<template>
  <vxe-table
    :data="tableData"
    highlight-current-row
    ref='xTable'
    :row-config="{isCurrent: true, isHover: true}"
  >
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
    <vxe-table-column field="address" title="Address"></vxe-table-column>
  </vxe-table>
  <button @click='$refs.xTable.setCurrentRow(tableData[1])'>第二行高亮</button>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 填充你的数据
      ]
    }
  },
  methods:{
  }
}
</script>