在使用table组件时 遇到了一个问题
需求时点击行元素时 为当前行添加一个激活状态
此时 需要用到自定义行customRow

官方文档

customRow 用法 #
适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。

<Table
customRow={(record) => {
return {
  props: {
    xxx... //属性
  },
  on: { // 事件
    click: (event) => {},       // 点击行
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {},  // 鼠标移入行
    mouseleave: (event) => {}
  },

};
)}
customHeaderRow={(column) => {
return {
  on: {
    click: () => {},        // 点击表头行
  }
};
)}
/>

介绍的相对来说 太过于笼统
以下是我的代码

<template>
  <div class="outer">
      <a-table :customRow="row" :rowClassName="choose" :columns="columns" :dataSource="data">
        <a slot="name" slot-scope="text">{{text}}</a>
      </a-table>
    </div>
</template>

<script>
import Table from "ant-design-vue/lib/table";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
];
export default {
  name: "Test",
  components: {
    aTable: Table
  },
  data() {
    return {
      data,
      columns,
      key: data[0].key
    };
  },

  methods: {
    row(record){
      const that=this;
      return {
        on:{
          click(){
            that.key=record.key;
          }
        }
      };
    },
    choose(record) {
      if (record.key === this.key) {
        return "current";
      } else {
        return "";
      }
    }
  }
};
</script>
<style>
.outer {
  width: 600px;
  margin: 0 auto;
}
.current {
  background: pink;
}
</style>

customRow用来自定义行,使用rowClassName配合 即可实现table组件行动态添加类名 从而实现行激活/选中的效果

标签: none

添加新评论