记: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 />











网友评论