<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的输入形式相似,如果逻辑间接,这么解决更容易