首页 > 其他分享 >avue组件自定义按钮/标题/内容/搜索栏

avue组件自定义按钮/标题/内容/搜索栏

时间:2023-08-10 18:41:52浏览次数:42  
标签:index 自定义 crud 按钮 旧版本 avue 写法 row

话不多说 笔记直接分享!!

一、自定义crud搜索栏组件

<template slot-scope="scope" slot="provinceCodeSearch">
  <avue-select
    v-model="objFrom.provinceCode" //这是存放省份的code
    placeholder="请选择省市"
    :dic="ProvinceList" //存放省份的下拉选择项
  ></avue-select>
</template>
column: [
  {
    showColumn: false,
    label: "省份",
    prop: "provinceCode",
    type: "select",
    search: true, //显示到search栏
    searchslot: true, //使用插槽
  },
]

二、自定义crud列表头部按钮

  旧版本写法:
    <template slot="menuLeft">
      <el-button size="small" type="primary" icon="el-icon-edit">添加</el-button>
    </template>

  新版本写法:
    <template #menu-left="{}">
      <el-button size="small" type="primary" icon="el-icon-edit">添加</el-button>
    </template>

三、自定义crud操作栏按钮

  旧版本写法:
    <template slot-scope="scope" slot="menu">
      <el-button type="text" icon="el-icon-view" size="small" @click.stop="handleView(scope.row,scope.index)">查看</el-button>
      <el-button type="text" icon="el-icon-edit" size="small" @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
      <el-button type="text" icon="el-icon-delete" size="small" @click.stop="handleDel(scope.row,scope.index)">删除</el-button>
    </template>

  新版本写法:
    <template #menu="{row,index,size}">
      <el-button type="text" icon="el-icon-view" size="small" @click.stop="handleView(row,index)">查看</el-button>
      <el-button type="text" icon="el-icon-edit" size="small" @click.stop="handleEdit(row,index)">编辑</el-button>
      <el-button type="text" icon="el-icon-delete" size="small" @click.stop="handleDel(row,index)">删除</el-button>
    </template>


    // 调出查看方法
    handleView (row, index) {
      this.$refs.crud.rowView(row, index);
    },
    // 调出编辑方法
    handleEdit (row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    // 调出删除方法
    handleDel (row, index) {
      this.$refs.crud.rowDel(row, index);
    },

四、自定义crud列表显示字段值和样式

  旧版本写法:
    <template slot-scope="{row}" slot="pointId">
      <el-tag>{{row.pointIdName}}</el-tag>
    </template>

  新版本写法:
    <template #pointId="scope">
        <el-tag>{{row.pointIdName}}</el-tag>
    </template>

    column: [
      {
        label: "所属区域",
        prop: "pointId",
        slot: true, //插槽开启
      },
    ]

五、自定义form表单标题

  旧版本写法:
    <template slot-scope="{}" slot="businessRegisterMaterialLabel">
      <span>工商注册材料&nbsp;&nbsp;</span>
      <el-tooltip class="item" effect="dark" placement="bottom">
        <div slot="content" style="max-width:500px;">第一行文字提示<br/>第二行文字提示</div>
        <i class="el-icon-warning"></i>
      </el-tooltip>
    </template>

  新版本写法:
    <template #name-label="{}">
      <span>工商注册材料&nbsp;&nbsp;</span>
      <el-tooltip class="item" effect="dark" placement="bottom">
        <div slot="content" style="max-width:500px;">第一行文字提示<br/>第二行文字提示</div>
        <i class="el-icon-warning"></i>
      </el-tooltip>
    </template>

    column: [
      {
        label: "工商注册材料",
        prop: "businessRegisterMaterial",
        type: "select",
        labelslot:true, //使用插槽
      },
    ]

六、自定义form表单内容

  旧版本写法:
    <template slot="postIdsForm" slot-scope="scope">
      <el-cascader
        v-model="form.postIds"
        :options="postIdsOptions"
        :props="props"
        collapse-tags
        collapse-tags-tooltip
        clearable
        style="width: 100%;"
      />
    </template>

  新版本写法:
    <template #postIds-form="{row}">
      <el-cascader
        v-model="form.postIds"
        :options="postIdsOptions"
        :props="props"
        collapse-tags
        collapse-tags-tooltip
        clearable
        style="width: 100%;"
      />
    </template>

    column: [
      {
        label: "身份证",
        prop: "postIds",
        type: "select",
        formslot:true, //使用插槽
      },
    ]

七、自定义form表单弹窗内底部按钮

  旧版本写法:
    <template slot="menuForm">
      <el-button size="small" icon="el-icon-plus">签约缴费</el-button>
    </template>

  新版本写法:
    <template #menu-form="{}">
      <el-button size="small" icon="el-icon-plus">签约缴费</el-button>
    </template>

 

 

标签:index,自定义,crud,按钮,旧版本,avue,写法,row
From: https://www.cnblogs.com/jinhaisheng/p/17621038.html

相关文章

  • 6.Filebeat的安装及收集日志到Elasticsearch并使用自定义索引
    利用Filebeat收集日志Filebeat是用于转发和集中日志数据的轻量级传送程序.作为服务器上的代理安装,Filebeat监视指定的日志文件或位置,收集日志事件,并将它们转发到Elasticsearch或Logstash进行索引.Logstash也可以直接收集日志,但需要安装JDK并且会占用至少500M以上的内存生产......
  • vue自定义指令(防抖)
    importVuefrom'vue'/***按钮防抖,300毫秒内只触发一次请求*区分了一下传参和不传参的情况*///不传参数,用法:v-debounce="test_debounce"Vue.directive('debounce',{inserted:function(el,binding){lettimerel.addEventListener('click',......
  • 定制 ChatGPT 以满足您的需求 自定义说明
    推荐:使用NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景20月<>日,OpenAI 宣布他们正在引入带有自定义说明的新流程,以根据您的特定需求定制ChatGPT。什么是自定义说明?新的测试版自定义指令功能旨在通过防止用户在聊天会话之间重复常用指令来帮助用户充分利用ChatGPT。......
  • 原生上传文件按钮样式优化
    //解决思路,原生上传文件按钮设置成完全透明,然后定位放大到需要的按钮上,让他全覆盖上去//这是用了kindeditor后生成的新控件,所以直接找.upload-input1<ahref=""class="pre_btnpre_btn_change">更换照片<inputclass="upload-inputupload-input1"type="file"id="uploadi......
  • Sharding自定义分片策略
    公司分库分表使用用户id,主键后3位拼接用户id后三位,现把相关分片规则自定义简易组件使用一、参数配置引用者可以配置主键字段与用户字段命名,配置分片日志记录等packagecom.ypshengxian.shardingslice.properties;importorg.springframework.beans.factory.annotation.Val......
  • 利用pytorch自定义CNN网络(三):构建CNN模型
    本文是利用pytorch自定义CNN网络系列的第三篇,主要介绍如何构建一个CNN网络,关于本系列的全文见这里。笔者的运行设备与软件:CPU(AMDRyzen™54600U)+pytorch(1.13,CPU版)+jupyter;本文所用到的资源:链接:https://pan.baidu.com/s/1WgW3IK40Xf_Zci7D_BVLRg提取码:12121.如何......
  • Vue 自定义组件
    下面有一个例子。<template><el-input:value="value"@click.native="select"readonly><iclass="el-icon-circle-close"slot="suffix"@[email protected]="clear"/>&l......
  • 七月学习之Iptables自定义链
    9、Iptables自定义链9.1、为什么要使用自定义链iptables的默认链就已经能够满足我们了,为什么还需要自定义链呢当默认链中的规则非常多时,不便于管理1、假设INPUT链中存放了100条规则,这100条规则有针对80端口的,有针对22端口的2、如果想修改22端口的规则,则需要将所有规则都看一遍,......
  • 利用pytorch自定义CNN网络(二):数据集的准备
    本文是利用pytorch自定义CNN网络系列的第二篇,主要介绍构建网络前数据集的准备,关于本系列的全文见这里。笔者的运行设备与软件:CPU(AMDRyzen™54600U)+pytorch(1.13,CPU版)+jupyter;本文所用到的资源:链接:https://pan.baidu.com/s/1WgW3IK40Xf_Zci7D_BVLRg提取码:1212在训......
  • avue-crud属性配置项参数笔记分享
     Avue是一个基于Element-plus低代码前端框架,它使用JSON配置来生成页面,可以减少页面开发工作量,极大提升效率;虽然Avue官网上面都有这些配置说明,但是如果刚开始接触不熟悉框架的话需要很久才找到自己需要的参数配置,为了方便自己今后查找使用,现将一些开发中常用的配置梳理在下......