ant-design,a-table

<a-table ref="table" size="middle" bordered rowKey="jobid" :columns="columns" :dataSource="jobList"
  :pagination="ipagination" :loading="loading" @change="handleTableChange">


<span slot="departid" slot-scope="text"> {{ text | departFilter }} </span>

<span slot="action" slot-scope="text, row">
    <a @click="handleEdit(row)">编辑</a> <a-divider type="vertical"/>
    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.jobid)">
      <a>删除</a>
    </a-popconfirm>
  </span>
  
</a-table>

• rowkey,唯一,多选等下拉框时使用
• dataSource,对应的json数组
• columns对应json返回的列名
• 通过过滤器,把id转化为name,在页面显示
• slot-scope="text, row" row传的是当前行的数据
• 也可以像删除功能类似的传row.id

<span slot="state"
              slot-scope="text, record">
          <span v-for="(item,index) in customsCheckStatuses"
                :value="item.value"
                :key="index">
            {{record.state==item.value? item.text:""}}
          </span>
        </span>
        
<template slot="title" slot-scope="{title}">
          <span v-if="title.indexOf(searchValue) > -1">
            {{title.substr(0, title.indexOf(searchValue))}}
            <span style="color: #f50">{{searchValue}}</span>
            {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
          </span>
          <span v-else>{{title}}</span>
        </template>

• 这种方式和filter的输出方式类似,如果逻辑直接,这么处理更容易