antdesign表格中div高度如何能撑满整个td
<template>
<a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 2000, y: 300 }" bordered>
<template #headerCell="{ column }">
<template v-if="column.dataIndex === 'name'">
<div class="a">
<div class="c">姓名</div>
<div class="b">
<div>222</div>
<div>333</div>
</div>
</div>
</template>
</template>
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'name'">
<div class="b">
<div class="d">fafsd犯得上地方</div>
<div class="e">333</div>
</div>
</template>
</template>
</a-table>
<div v-for="(item, index) in list" :key="item" draggable @dragstart.stop="onDragStart(item, index)"
@dragover.stop="onDragOver($event)" @drop.stop="onDrop(index, item)" class="r">{{ item }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const dataSource = ref([
{
key: '1',
name: '胡彦斌',
age: 32,
address1: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
address2: '西湖区湖底公园2号',
address3: '西湖区湖底公园3号',
address4: '西湖区湖底公园4号',
address5: '西湖区湖底公园5号',
address6: '西湖区湖底公园6号',
address7: '西湖区湖底公园7号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园2号',
address3: '西湖区湖底公园3号',
address4: '西湖区湖底公园4号',
address5: '西湖区湖底公园5号',
address6: '西湖区湖底公园6号',
address7: '西湖区湖底公园7号',
},
]);
const columns = ref([
{
title: '姓名',
dataIndex: 'name',
width: 150,
},
{
title: '年龄',
dataIndex: 'age',
width: 150,
},
{
title: 'address1',
dataIndex: 'address1',
width: 150,
}, {
title: 'address2',
dataIndex: 'address2',
width: 150,
}, {
title: 'address3',
dataIndex: 'address3',
width: 150,
}, {
title: 'address4',
dataIndex: 'address4',
width: 150,
}, {
title: 'address5',
dataIndex: 'address5',
width: 150,
}, {
title: 'address6',
dataIndex: 'address6',
width: 150,
}, {
title: 'address7',
dataIndex: 'address7',
width: 150,
}
]);
return {
dataSource,
columns,
};
},
};
</script>
<style lang="scss" scoped>
.a {
text-align: center;
display: flex;
flex-direction: column;
}
.b {
display: flex;
justify-content: space-around;
}
.c {
border-bottom: 1px solid #eee;
}
.d {
border-right: 1px solid #eee;
width: 50%;
text-align: center;
}
.e {
width: 50%;
text-align: center;
}
.r {
width: 200px;
height: 50px;
background-color: aquamarine;
margin-bottom: 10px;
line-height: 50px;
text-align: center;
cursor: pointer;
user-select: none;
}
:deep(.ant-table-tbody>.ant-table-row>td) {
padding: 0px 4px !important;
}
:deep(.ant-table-thead>tr>th) {
padding: 0px;
}
</style>