首页 > 其他分享 >vue jeecg表格对数据的处理自定义

vue jeecg表格对数据的处理自定义

时间:2022-11-30 19:34:25浏览次数:48  
标签:vue center 自定义 title text align record dataIndex jeecg

// 表头
columns: [
...
{
title: '商品图片',
align: "center",
dataIndex: 'coverImgLocal',
scopedSlots: { customRender: 'picture' }
},
{
title: '商品名称',
align: "center",
dataIndex: 'name',
ellipsis: true,
},
...
{
title: '价格类型',
align: "center",
dataIndex: 'priceType',
customRender: (text) => {
if (text == '1') {
return '一口价';
} else if (text == '2') {
return '价格区间';
} else if (text == '3') {
return '显示折扣价';
}
}

},
{
title: '价格(元)',
align: "center",
dataIndex: '',
scopedSlots: { customRender: 'price' }
},
....
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],

<a-table
ref="table"
size="middle"
bordered
rowKey="goodsId"
:columns="columns"
:dataSource="tableList"
:pagination="ipagination"
:loading="loading"
class="j-table-force-nowrap"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">

<span slot="action" slot-scope="text, record">
<!--生效-->
<div v-if="record.deleted == '1'">
<a @click="handleDisable(record)" style="color:#3ccf2e">失效</a>
<!--未审核-->
<span v-if="record.auditStatus == '0'" style="color:deepskyblue">
<a-divider type="vertical"/><a @click="handleRetryAudit(record)">提交审核</a>
<a-divider type="vertical"/><a @click="handleEdit(record)">修改</a>
</span>
<!--审核中-->
<span v-if="record.auditStatus == '1'" style="color:deepskyblue">
<a-divider type="vertical"/><a @click="handleResetAudit(record)">撤回审核</a>
<a-divider type="vertical"/><a @click="handleEdit(record)">查看</a>
</span>
</div>

<!--失效-->
<div v-if="record.deleted == '2'">
<a @click="handleEnable(record)" style="color:red">生效</a>
<!--审核通过-->
<span v-if="record.auditStatus == '2'" style="color:deepskyblue">
<a-divider type="vertical"/><a @click="handleEdit(record)">修改</a>
</span>
</div>
</span>
<span slot="price" slot-scope="text, record">
<span v-if="record.priceType == '1'">
<span>{{record.price}}</span>
</span>
<span v-if="record.priceType == '2'">
{{record.price}} - {{record.price2}}
</span>
<span v-if="record.priceType == '3'">
<span style="text-decoration:line-through">{{record.price}}</span>(原价)       {{record.price2}}(现价)
</span>
</span>
<span slot="picture" slot-scope="text">
<!-- <img class="bus-img" :src="text" alt="商品图片" v-if="text!=null">-->
<img class="bus-img" v-lazy="text" alt="商品图片" v-if="text!=null">
</span>
</a-table>

标签:vue,center,自定义,title,text,align,record,dataIndex,jeecg
From: https://blog.51cto.com/u_12528551/5900327

相关文章