使⽤antd-vue的a-table⾃定义展开图标并且异步展开（展开图标点开两次才⽣效的问题解决）
1 a-table⾃定义展开图标
需求是展开图标换成这个样⼦
可以利⽤a-table的  expandIcon 属性
具体使⽤如下
<a-table
v-if="isRouterAlive"
:columns="columns"
:data-source="matterList"
:expandIcon="customExpandIcon"
:expandedRowKeys="expandedRowKeys"
:defaultExpandedRowKeys="defaultExpandedRowKeys"
@expand="fatherExpand"
:indentSize="16"
/>
<script>
import IconCaretRight from '@ant-design/icons/svg/outline/caret-right.svg?inline'
import IconCaretDown from '@ant-design/icons/svg/outline/caret-down.svg?inline'
export default {
data () {
return {
expandedRowKeys: [],
defaultExpandedRowKeys: [],
// 这是table数据
matterList: [],
columns: []
}
},
methods: {
// 树节点展开⽅法点击展开图标时的⽅法
// 利⽤es7的async await 可以等数据请求回来之后进⾏后续流程，否则就会出现点击两次数据才显⽰
async fatherExpand (expanded, record) {
if (expanded) {
Child(record)
} else {
}
},
/
/ 栏⽬树获取⼦节点数据
// 把获取来的数据放到 record的children⾥点击展开图标就会有数据显⽰了
getChild (record) {
return new Promise(resolve => {
evnetSort({ pid: record.iid }).then(res => {
// table默认带树表格，如果使⽤children作参数名则会出现两个表格
if (res.success) {
res.data.matterEntities.map(item => {
item.children = []
})
record.children = res.data.matterEntities
if (record.children === null || record.children.length === 0) {
record.hasChild = false
}
resolve()
}
})
})
},
customExpandIcon (props) {
// 是否有⼦项，⽆⼦项不展⽰图标
/
/ record是每⾏的数据，后端返回的数据会有⼀个hasChild字段判断是否有⼦项
if (d && d.hasChild) {margin属性怎么用
// panded a-table组件判断是否展开了为true是展开,false为没展开
if (panded) {
// onClick事件必须添加上，相当于把a-table⾥的展开事件给了⾃定义的图标，不加的话点击会失效          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
{IconCaretDown} onClick={e => { d, e) }} />
} else {
return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
{IconCaretRight} onClick={(e) => { d, e) }} />
}
} else {
return <span />
}
},
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。