ant design vue 开发经验总结

目录：

一、table表格高亮某一行

二、修改表格中的值

 

一、table表格高亮某一行

1.table属性 rowClassName

<a-table
        class="alerm"
        size="small"
        ref="table"
        rowKey="id"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :columns="columns"
        :dataSource="loadData"
        :scroll="{x:200}"
        bordered
        :rowClassName="setRowClassName"
      >
</a-table>

2.在methods方法中

setRowClassName (record) {
      if (record.alarmLevelName === '严重') {
        return 'rowcolor'
      } else {
        return 'rowcolor2'
      }
    }

3.样式

<style>
.alerm .rowcolor{
  color: red;
}
.alerm .rowcolor2{
  background: blue;
}
</style>

注意：style不能加scoped，否则无效。（我在开发时遇到此问题，请特别注意）

4.实现

参考资料：ant-design vue table表格高亮某一行 某一格 - 赤川 - 博客园 (cnblogs.com)

二、修改表格中的值

1、添加scopedSlots属性

const columns = [
  {
    title: "是否增补",
    dataIndex: "addFlag",
    width: 90,
    //使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'}
    scopedSlots: { customRender: "addFlag" },
  }
]  

2、判断返回值是否为true

<a-table
  :columns="columns"
  :data-source="data"
  :pagination="pagination"
  :scroll="{ x: 1500, y: 400 }"
  @change="showSizeChange"
  rowKey="id"
  bordered
>
  <template slot="addFlag" slot-scope="text">
    {{ text ? "✔" : "" }}
  </template>
</a-table>

3、效果图

 

 

参考资料：https://blog.csdn.net/qq_41902908/article/details/109071181