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

发布时间 2023-08-10 18:14:21作者: 小金子J

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

一、自定义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>