自定义表单提交筛选分页怎么做_Vue form 表单提交+ajax异步请求+分页效果

废话不多说了,直接给大家贴代码了,具体代码如下所示:

异步参数上传

-->

-->

$context.ctx = '${ctx}';

$context.resources = '${ctx}/resources';

placeholder="请输入appkey">

placeholder="请输入批次号">

v-model.trim="batchInforRequestVO.currentPage">

查询

查询结果
批次号处理进度文件名称上传时间请求方法操作
{{batchInforResponseVO.batchNum}}{{batchInforResponseVO.processPercentage}}{{batchInforResponseVO.channelName}}{{batchInforResponseVO.inserTime}}{{batchInforResponseVO.requestAddre}}导出

v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出

每页10条记录 当前页{{batchInforRequestVO.currentPage}} &nbsp

共{{totalPage}}页&nbsp←上一页&nbsp &nbsp

id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现可视化可拖放的自定义可以使用Vue.js和一些第三方库来帮助我们完成。下面是一个简的实现步骤: 1. 安装并引入vue-draggable插件 可以使用npm安装vue-draggable插件:`npm install vuedraggable --save`,然后在Vue组件中引入该插件。 ```javascript import draggable from 'vuedraggable' export default { components: { draggable } } ``` 2. 创建设计器组件并添加元素 在Vue组件中,可以使用`draggable`组件来实现拖放功能。我们可以使用`v-for`指令渲染元素列,并将元素添加到`draggable`组件中。 ```html <draggable v-model="formElements"> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> </draggable> ``` 3. 添加元素到设计器 我们可以添加按钮来添加新的元素。在Vue组件中,我们可以使用`@click`事件添加新的元素到元素列。 ```html <button @click="addInput">Add Input</button> <button @click="addSelect">Add Select</button> ``` ```javascript export default { data() { return { formElements: [] } }, methods: { addInput() { this.formElements.push({ type: 'input', inputType: 'text', placeholder: 'Enter text' }) }, addSelect() { this.formElements.push({ type: 'select', options: ['Option 1', 'Option 2', 'Option 3'] }) } } } ``` 4. 渲染 最后,我们可以使用`v-for`指令再次渲染元素列,并将元素添加到中。 ```html <form> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> <button type="submit">Submit</button> </form> ``` 完整代码如下: ```html <template> <div> <draggable v-model="formElements"> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> </draggable> <button @click="addInput">Add Input</button> <button @click="addSelect">Add Select</button> <form> <div v-for="(element, index) in formElements" :key="index"> <input v-if="element.type === 'input'" :type="element.inputType" :placeholder="element.placeholder"> <select v-else-if="element.type === 'select'"> <option v-for="(option, optionIndex) in element.options" :key="optionIndex">{{ option }}</option> </select> </div> <button type="submit">Submit</button> </form> </div> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { formElements: [] } }, methods: { addInput() { this.formElements.push({ type: 'input', inputType: 'text', placeholder: 'Enter text' }) }, addSelect() { this.formElements.push({ type: 'select', options: ['Option 1', 'Option 2', 'Option 3'] }) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值