关键点在于获取Table的数据源中每一行的数据中要有一个属性key,key的值必须是唯一的,这个字段可以在获取table数据源之后通过for循环新增一个key属性字段,关键的代码示例如下:
<template>
<div>
<!-- 列表 -->
<a-table :data-source="tableSource" :columns="columns" :pagination="false" :row-selection="rowSelection" :loading="tableloading">
<template slot="shsfqr" slot-scope="text, record">
<a-tag color="pink" v-if="record.BillStatus==0">未确认</a-tag>
<a-tag color="green" v-if="record.BillStatus==1">已确认</a-tag>
</template>
</a-table>
</div>
</template>
<script>
import {apiList1} from "@api/yizhifu"
export default {
name: 'ceshi1',
data () {
return {
tableSource:[],//表格数据源
columns:[
{
title: '房间号',
dataIndex: 'rmno',
align:"center",
width: 100,
},
{
title: '实收金额',
dataIndex: 'ActualPayMoney',
align:"center",
width: 100,
},
{
title: '支付类型',
dataIndex: '支付类型',
align:"center",
width: 100,
},
{
title: '实收是否确认',
dataIndex: 'BillStatus',
align:"center",
scopedSlots: { customRender: 'shsfqr' },
width:120,
},
{
title: '外部支付订单号',
dataIndex: 'Externalordernumber',
align:"center",
width: 200,
},
],//表格每一列
tableloading:false,//table加载中效果,默认没有加载中
selectedRowKeys:[],//选中的行在表格数据源的下标值集合
selectedRows:[],//选中的行的对象集合
}
},
created() {
this.getList();//获取列表
},
computed: {
//表格的列选择发生改变
rowSelection() {
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.selectedRowKeys=selectedRowKeys;//选中的行在表格数据源的下标值集合
this.selectedRows=selectedRows;//选中的行的对象集合
},
getCheckboxProps: record => ({
props: {
disabled: record.BillStatus==='1', // BillStatus==1不可选
name: record.BillStatus,
},
}),
};
},
},
methods: {
//获取列表
getList(){
this.tableloading=true;//显示表格加载中效果
apiList1().then(res=>{
console.log("1-获取列表res:",res)
this.tableloading=false;//关闭表格加载中效果
if(res.code==200){
let arr1=res.result;//列表
for(let i=0;i<arr1.length;i++){
arr1[i].key=i
}
console.log("列表新增key字段后的arr1:",arr1)
this.tableSource=arr1;//表格数据源赋值
}else{
this.$message.error(res.message);//错误提示
}
})
},
}
}
</script>
<style scoped>
</style>
5134

被折叠的 条评论
为什么被折叠?



