美文网首页
antdv使用记录

antdv使用记录

作者: 清平乐啊 | 来源:发表于2022-08-17 17:56 被阅读0次

记:2022.08.17

一、table

1.table自定义选项--禁用选项

// html
<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, type: 'radio', onChange: onSelectChange, getCheckboxProps: getCheckboxProps }" :columns="columns" :dataSource="dataSource" :rowKey="record=>record.id" @change="handleTableChange">
</a-table>
// js
// table select
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    },
// 禁用满足某个条件的选项
    getCheckboxProps(record) {
      return { props: { disabled: record.id=== xxx } }
    },

2.table行自定义

// html
<a-table :customRow="customRow"></a-table>
// js
 customRow(record) {
      return {
        style: {
          'background-color': record.scene == "ktv" ? '#FFCCCC' : ''
        },
        on: {
          click: () => {
            console.log("recode", record)
          }
        },
      }
    },

二、antd vue3全局引入图标

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less';
import * as Icons from '@ant-design/icons-vue'

const icons: any = Icons;

const app = createApp(App)
app.use(Antd)
app.mount('#app')
for (const i in icons) {
  app.component(i, icons[i])
}

// 使用--查看antdv文档点图标复制代码即可
<user-outlined />

相关文章

网友评论

      本文标题:antdv使用记录

      本文链接:https://www.haomeiwen.com/subject/smasurtx.html