vue 使用ant design vue组件实现点击表格数据弹窗
写在columns数组的对象里面
customRender: (text, record, index) => { if (index === this.list.length - 1) { //此列的最后一行的数据不做事件 return (<span>{text}</span>) //只看数据 } else { return (<a onclick={() => { this.caseList(record, '诉前保全') }}>{{ text }}</a>)//做点击事件并且带有此列的标题(诉前保全)和点击所在的整行数据。 }
点击事件:
customRender: (text, record) => { return (<a onclick={() => { this.caseList(record, '旧存') }}>{{ text }}</a>) }
表格:具体看UI库:https://www.antdv.com/components/table-cn/
<Table class="enter-X" :row-key="(record,index)=>{return index}" :columns="columns" :scroll="{x: 1400}" :data-source="list" :loading="loading" :pagination="false" > <!-- <div slot="data" slot-scope="text, record"> <a @click="caseList(record,text)">{{ text }}</a> </div> --> </Table>
columns的构造决定表头的样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
表格折叠
@expand="expand"(折叠表格的折叠点击事件)
<Table class="enter-X" :row-key="(record,index)=>{return index}" :columns="columns" bordered :scroll="{x: 1400}" :data-source="list" :loading="loading" :pagination="false" @expand="expand"//点击事件 />
标签:vue,return,表格,text,ant,点击,design,columns From: https://www.cnblogs.com/cwt981105/p/16898335.html