avue 的常用方法

okseventy

已于 2023-07-20 11:34:25 修改

阅读量382

点赞数

文章标签： javascript 前端开发语言

于 2023-07-19 17:01:05 首次发布

本文链接：https://blog.csdn.net/Yane410/article/details/131812777

版权

该代码段展示了如何在Vue应用中使用option.js来配置表格组件avue-crud，包括列定义、字典数据的使用、搜索功能以及自定义插槽。同时，它涉及到动态获取字典数据并用于下拉选择框，以及审批状态的显示和自定义操作按钮。

摘要由CSDN通过智能技术生成

option.js

import {  getStore } from "@/util/store";

export const option = {
  index: true,
  menu:false,//取消操作列
  indexLabel: "序号",
  border: false,
  searchMenuSpan: 6,
  searchShowBtn: false,
  stripe: true,
  headerAlign: "center",
  align: "center",
  addBtn: false,
  editBtn: false,
  delBtn: false,
  viewBtn: false,
  selectClearBtn: false,
  size: "mini",
  labelWidth: 100,
  rowKey: "id",//使用rowKey來设置一个唯一值
  columnBtn: false,
  selection: true,
  reserveSelection:true,//分页时保留上一页得勾选
  column: [
    {
      label: "队员姓名",
      prop: "name",
      search: true
    },
    {
      label: "性别",
      prop: "gender",
      type: "select",
      dicData: [
        {
          label: "男",
          value: 1
        },
        {
          label: "女",
          value: 2
        }
      ]
    },
    {
      label: "手机号码",
      prop: "mobile"
    },
    {
      label: "岗位",
      prop: "post",
      search: true,
      type: "select", 
      dicData: []
    },
//配置字典值
    {
      label: "队员状态",
      prop: "eocStatus",
      search: true,
      type: "select",
      dicData: [
        {
          dictValue: null,
          dictLabel: "全部"
        },
        {
          dictValue: 0,
          dictLabel: "待命中"
        },
        {
          dictValue: 1,
          dictLabel: "任务中"
        },
        {
          dictValue: 2,
          dictLabel: "休假中"
        }
      ],
      props: {
        label: "dictLabel",
        value: "dictValue"
      }
    },
    {
      label: "来源",
      prop: "source",
      dicData: [],
      props: {
        label: "dictDataLabel",
        value: "dictDataValue"
      }
    },
       {
        searchLabelWidth: 80,
        label: "发送时间",
        prop: "sendTime",
        format: "yyyy-MM-dd HH:mm",
        type: "datetime",
        rangeSeparator: "-"
      },
//使用接口字典值配置数据
        {
        searchLabelWidth: 80,
        label: "短信类型",
        prop: "smsType",
        type:'select',
        dicData: getStore({ name: "busiDictList" }).find(
          element => {
            if(element.dictType == "sms_type"){
             return element.dataList
            }
          }
        ).dataList,
        props: {
          label: "dictLabel",
          value: "dictValue"
        },
        search: true,
        searchClearable: true,
        searchSpan: 6
      },
  ]
};

export const userOption = {
  index: true,
  indexLabel: "序号",
  border: false,
  searchMenuSpan: 6,
  searchShowBtn: false,
  selection: true,
  stripe: true,
  headerAlign: "center",
  align: "center",
  addBtn: false,
  editBtn: false,
  delBtn: false,
  viewBtn: false,
  selectClearBtn: false,
  size: "mini",
  labelWidth: 100,
  rowKey: "id",
  columnBtn: false,
  menu: false,
  column: [
    {
      label: "姓名",
      prop: "realName",
      search: true
    },
    {
      label: "手机号码",
      prop: "mobile",
      search: true
    },
    {
      label: "所属组织",
      prop: "deptName",
      search: true,
    }
  ]
};

<template>
	<basic-container>
		<avue-crud :data="data" :search.sync="search" :option="option" :page.sync="page" :table-loading="loading"
			@search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
			@size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
			<template slot-scope="scope" slot="approvalStatus">
				<span v-if="scope.row.approvalStatus === 0"
					class="el-tag el-tag--warning el-tag--small el-tag--light">待审批</span>
				<span v-if="scope.row.approvalStatus === 1"
					class="el-tag el-tag--success el-tag--small el-tag--light">已审批</span>
			</template>
//在option中配置slot为true
//slot = 变量+Search
			<template slot="updaterNameSearch">
				<el-select v-model="search.creator" filterable clearable placeholder="请选择">
					<el-option v-for="item in dataList" :key="item.id" :label="item.realName" :value="item.id">
					</el-option>
				</el-select>
			</template>
			<template slot="createDateSearch">
				<el-date-picker v-model="searchDate" type="datetimerange" range-separator="~" format="yyyy-MM-dd  HH:mm"
					value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</template>
			<template slot="menu" slot-scope="scope">
				<span v-if="scope.row.approvalStatus === 0">
					<el-button type="text" size="mini" @click="approvalClick(scope.row.id)"  v-if="permission['approval']">审批</el-button>
				</span>
				<span  v-if="scope.row.approvalStatus === 1">
					<el-button type="text" size="mini"
						@click="viewClick(scope.row.id)"  v-if="permission['approvalView']">查看</el-button>
				</span>
				
			</template>
		</avue-crud>
	</basic-container>
</template>

效果图：

	<el-row :gutter="24">
						<el-col :span="24">
							<el-form-item label="短信内容：">
								<div v-html="ruleForm.assessment" v-if="type !== 'add'"></div>
								<avue-ueditor v-model="ruleForm.assessment" v-if="type === 'add'"
									:options="editorOptions"></avue-ueditor>
							</el-form-item>
						</el-col>
					</el-row>