[ant design of vue ] table表格 ,选中行添加样式

最新推荐文章于 2024-04-25 15:28:41 发布

原创最新推荐文章于 2024-04-25 15:28:41 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

ant design of vue】专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何使用Ant Design的A-Table组件实现动态行样式和交互功能。通过设置`customRow`和`rowClassName`属性，实现了点击行时添加背景色的效果。同时，`onClickRow`函数用于处理行点击事件，记录选中行的ID。博客内容包括HTML、JS和CSS代码示例，用于展示数据源、行点击回调和自定义行样式。

html

  <a-table
              :columns="columns"
              :data-source="markerArr"
              size="small"
              :pagination="false"
              :customRow="onClickRow"
              :rowClassName="setRowClassName"
              height="250"
            >
              <template slot="status" slot-scope="text, record">
                <p
                  :class="{
                    appoint_cl: record.status == '超时',
                    cancel_cl: record.status == '离线',
                    pass_cl: record.status == '正常',
                  }"
                >
                  {{ text }}
                </p>
              </template>
            </a-table>

在这里插入图片描述
js

export default {
 data() {
    return {
    		rowid: '', // 选中行的id
    		 markerArr: [
		        {
		          key: '1',
		          uid: 1,
		          title: '刘叔',
		          point: '121.43|37.45',
		          address: '工业园区',
		          color: 'red',
		          status: '超时',
		        },
		        {
		          key: '2',
		          uid: 2,
		          title: '刑寇',
		          point: '121.38|37.53',
		          address: '具体位置',
		          color: 'green',
		          status: '正常',
		        },
		        {
		          key: '3',
		          uid: 3,
		          title: '大头',
		          point: '121.25|37.5',
		          address: '科技园1号',
		          color: 'gray',
		          status: '离线',
		        },
      ],
    }
    }
}

   // 选中行
    onClickRow(record) {
      return {
        on: {
          click: () => {
            // console.log(record, '选中行')
            this.rowid = record.uid
          },
        },
      }
    },
    // 选中行添加类
    setRowClassName(record) {
      return record.uid == this.rowid ? 'clickRowSty' : ''
    },

css

/deep/ .clickRowSty {
    background-color: #1890ff;
    color: #fff;
  }
  /deep/ .clickRowSty:hover > td {
    background-color: #1890ff;
  }
  /deep/ .ant-table-tbody > tr > td {
    cursor: pointer;
  }