baidu / NoahV

An efficient front-end application framework based on vue.js
https://baidu.github.io/NoahV
Apache License 2.0
639 stars 146 forks source link

表格初始化向后台传输查询条件,传不过去;点击删除按钮删除某一行用params也无法传递参数到后台 #171

Open yantingbin2012 opened 4 years ago

yantingbin2012 commented 4 years ago
<template>
    <div class="filter-table-demo">
        <nvFilterTable
        :items="items"
            :columns="columns"
            :action="action"
            :pagination="pagination"
            url="/api/index"
            :rowSelect="true"
            :title="title"
            :tips="tips"
        />
    </div>
</template>

<script>

export default {
    name: 'demo-list-list',
    data() {
        return {
         items: [
                   {
                        name: 'name',
                        title: '模板名称',
                        type: 'select',
                        width: '200px',
                        option: [
                            {
                                    name: '全部',
                                    value: 'all'
                                },
                                {
                                    name: '通用上线模板',
                                    value: '通用上线模板'
                                },
                                {
                                    name: '云上产品上线模板',
                                    value: '云上产品上线模板'
                                }
                            ],
                            value: 'all',
                            required: true
                        },
                        {
                            name: 'date',
                            submitAlias: ['startTime', 'endTime'],
                            title: '创建日期',
                            type: 'nvTimeRange',
                            nvType: 'daterangetime',
                            validateType: 'array',
                            dateFormat: 'YYYY-MM-DD HH:mm:ss',
                            value: ['2018-06-13 00:00:03', '2018-06-18 00:00:15'],
                            required: true
                        }
                    ],
            title: '任务单信息',
            tips: '说明: 本表格只包含部分功能示例,详见说明文档: 模板 -> 表格模板',
            // table columns config
            columns: [
                {
                    title: 'ID',
                    key: 'RWD_ID',
                    link: '',
                    width: 100
                },
                {
                    title: '项目名称',
                    key: 'XM_ID',
                    render: (h, obj) => {
                        return h('span',
                            {
                                on: {
                                    click: () => {
                                        alert('您点击了模板名称');
                                    }
                                },
                                style: {
                                    cursor: 'pointer',
                                    color: '#495060'
                                }
                            },
                            [
                                h('nv-icon', {
                                    style: {
                                        marginRight: '5px'
                                    },
                                    props: {
                                        type: 'cube'
                                    }
                                }),
                                obj.row.XM_ID
                            ]);
                    }
                },
               // {
                //    title: '模板说明',
               //     key: 'detail',
              //      render(h, obj) {
              //          if (obj.row.detail === '云上产品请使用该模板') {
               //             return <span style="color: red">{obj.row.detail}</span>;
              //          }
              //          else {
             //               return <span>{obj.row.detail}</span>;
             //           }
             //       }
             //   },
            //    {
            //        title: '模板命令',
             //       key: 'cmd',
            //        color: '#00f',
            //        filters: [
             //           {
              //              label: 'empty',
             //               value: 'empty'
              //          },
             //           {
               //             label: 'release',
               //             value: 'release'
                 //       }
                //    ],
                //    filterMethod(value, row) {
                //        return row.cmd.indexOf(value) > -1;
               //     }
              //  },
               // {
               //     title: '创建日期',
              //      key: 'date',
               //     sortable: true
             //   },
             //   {
             //       title: '创建人',
             //       key: 'person',
             //       link: 'https://www.baidu.com/s?wd={person}',
             //       target: '_blank'
             //   }
            ],
            // page info
            pagination: {
                // 不使用远端分页
                remote: false,
                defaultPageSize: 10,
                pageSizeOptions: [10, 20, 30, 100]
            },
            // table action config, detail see documention:
            action: {
                title: '操作',
                list: [
                    {
                        type: 'nv-icon',
                        icon: 'edit',
                        className: 'delete-icon',
                        // label和icon只能展示一个
                        label: '编辑',
                        link: 'https://www.baidu.com?id={id}',
                        target: '_blank'
                    },
                    {
                        type: 'nv-icon',
                        btnType: 'error',
                        className: 'delete-icon',
                        icon: 'trash-alias',
                        style: {
                            color: '#2d8cf0'
                        },
                        confirm: {
                            title: '删除模板',
                            content: '数据删除后不可恢复,确认删除吗?',
                            okText: '删除',
                            cancelText: '我再想想',
                            api: '/api/user/delete',
                            params:{id : '123'},
                            successTip: '删除成功',
                            autoFresh: true
                        }
                    }
                ]
            }

        };
    }
};
</script>

<style lang="less" >

    .demo-list {

    }
</style>
iyuxy commented 4 years ago

请先查看下浏览器中的请求发送情况,看参数是否携带发送。

yantingbin2012 commented 4 years ago

![image](https://user-images.githubusercontent.com/71314807/93453613-766cff80-f90c-11ea-847f-8e311cfa3000.png image image 打得日志里面携带了,但是后端就是收不到,详情可以查看图片

iyuxy commented 4 years ago

看network image