<template>
|
<div class="">
|
<a-table class="ant-table-project" v-bind="$attrs" :row-selection="rowSelection" :columns="columns"
|
:data-source="model.userList" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, defineEmits } from 'vue'
|
import { useVModel } from '/@/hooks/use-v-model'
|
import { ColumnProps } from 'ant-design-vue/es/table/interface'
|
type Key = ColumnProps['key'];
|
|
const props = defineProps({
|
modelValue: {
|
type: [Object, Number, String],
|
required: true
|
},
|
})
|
const emit = defineEmits(['update:modelValue'])
|
const model = useVModel(props, 'modelValue', emit)
|
const columns = [
|
{
|
title: '人员组织名称',
|
dataIndex: 'userTeamName',
|
},
|
{
|
title: '成员账号',
|
dataIndex: 'member',
|
},
|
]
|
const selectedRowKeys = ref<Key[]>([])
|
const onSelectChange = (changableRowKeys: Key[]) => {
|
console.log('selectedRowKeys changed: ', changableRowKeys)
|
selectedRowKeys.value = changableRowKeys
|
}
|
const rowSelection = computed(() => {
|
return {
|
selectedRowKeys: unref(selectedRowKeys),
|
onChange: onSelectChange,
|
hideDefaultSelections: true,
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.ant-table-project :deep(.project_dark) td {
|
background-color: #232323 !important;
|
color: #fff !important;
|
border: none !important;
|
border-bottom: 1px solid #4f4f4f;
|
padding: 10px !important;
|
}
|
|
.ant-table-project :deep(.ant-table-placeholder) {
|
background: #434343 !important;
|
border: none !important;
|
}
|
|
.ant-table-project :deep(.ant-table-thead) th {
|
background: #3c3c3c !important;
|
color: #fff !important;
|
border: 1px solid #4f4f4f !important;
|
padding: 10px !important;
|
}
|
|
.ant-table-project :deep(.ant-table-body) table {
|
border: 1px solid #4f4f4f !important;
|
border-right: 1px solid #4f4f4f !important;
|
}
|
|
.ant-table-project :deep(.ant-table-body) {
|
background: #434343 !important;
|
}
|
|
.ant-table-project :deep(.ant-empty-description) {
|
color: #fff !important;
|
}
|
</style>
|
