ant-design-vue table组件字段提示、格式化

<div>
            <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :scroll="{ x: 2200 }"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                     :pagination="pagination" :loading="loading" @change="handleTableChange" bordered>
                <template slot="pop" slot-scope="text,record,index">
                    <div v-if="record.farmingContent==6">
                        <a-popover title="消息"  placement="right">
                            <template slot="content">
                                <div style="width: 300px;">
                                    <a-row>
                                        <a-col :span="10">提示文字:</a-col>
                                        <a-col :span="14">{{record.pestName}}</a-col>
                                    </a-row>
                                </div>
                            </template>
                            {{farmingContentFormat(record.farmingContent)}}
                        </a-popover>
                    </div>
                    <div v-else>
                        {{farmingContentFormat(record.farmingContent)}}
                    </div>
                </template>
                <template slot="actions" slot-scope="text, record, index">
                    <span>
                        <a-button @click.native="handleEdit(record)" size="small" type="primary" v-has="'ams:farming:edit'">编辑</a-button>
                        <a-button @click.native="handleDelete(record.id)" size="small" type="danger" v-has="'ams:farming:delete'">删除</a-button>
                    </span>
                </template>
            </a-table>
        </div>
data() {
            return {
                queryParam: {},
                columns: [
                    { title: 'Id', dataIndex: 'id', key: 'id', width: 60, align: 'center' },
                    {
                        title: '农事内容',
                        dataIndex: 'farmingContent',
                        key: 'farmingContent',
                        width: 120,
                        align: 'center',
                        scopedSlots: { customRender: 'pop' }
                    },
                    { title: '操作', key: 'actions', align: 'center', width: 240, fixed: 'right', scopedSlots: { customRender: 'actions' } }
                ]
            }
        },
methods: {
            farmingContentFormat(text) {
                return this.dictFilter('ams_farming_content', text)
            }
}

猜你喜欢

转载自www.cnblogs.com/lezuw/p/11358468.html