vue3+antdesign table实现表格行颜色

干饭了干饭了1

已于 2023-08-29 15:16:30 修改

阅读量537

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-29 15:14:28 首次发布

本文链接：https://blog.csdn.net/m0_45827438/article/details/132562078

版权

实现效果：

代码：

html:

    <a-table
      :columns="stockColumns"
      :data-source="stockData"
      class="ant-table-striped"
      :rowClassName="rowClassName"
    >
    </table>

js:

  const rowClassName = computed(() => {
    return (record, index: number) => (index === 0 ? 'darkYellow' : '');
  });

css:

  :deep(.ant-table-thead > tr > th) {
    background: rgb(255, 249, 243);
  }
  .ant-table-striped :deep(.darkYellow) td {
    background-color: rgb(255, 233, 214);
  }