vue 使用ant design vue组件实现表格操作

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的构造决定表头的样式

代码

表格折叠

 

 

 @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"//点击事件
    />