Avue前端控件大全和表格属性

https://avuejs.com/doc/crud/crud-doc
https://www.bookstack.cn/read/avue-2.x/391487d752fdf241.md


表格属性
  width: “100%”,//表格宽度
  calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）
  height: “auto”,//表格高度
  maxHeight: “auto”,//表格最大高度
  border: true,//是否显示表格边框
  expand: false,//是否展开折叠行
  index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
  indexLabel: “#”,//序号的标题
  stripe: true,//是否显示表格的斑马条纹
  showHeader: true,//是否显示表格的表头
  defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式
  align: “center”,//表格列对其方式left/center/right
  menu: true,//是否显示操作菜单栏
  menuWidth: 240,//操作菜单栏的宽度
  menuAlign: “left”,//菜单栏对齐方式left/center/right
  searchSize: “small”,//搜索控件的大小small/mini
  columnBtn: true,//列显隐按钮
  refreshBtn: true,//刷新按钮
  addBtn: true,//添加按钮
  searchBtn: true,//搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
  editBtn: true,//行内编辑按钮
  delBtn: true,//行能删除按钮
  align: 'center',
  menuAlign: 'center',
  menuWidth: 400,
  viewBtn: true,
  menuTitle: '其它',
  addTitle: '保存标题',
  editTitle: '编辑标题',
  viewTitle: '查看标题',
  searchBtnText:'搜索文案',
  emptyBtnText: '清空文案',
  addBtnText: '新增文案',
  addBtnIcon: 'el-icon-user',
  delBtnText: '删除文案',
  delBtnIcon: ' ',
  editBtnIcon: ' ',
  editBtnText: '编辑文案',
  viewBtnText: '查看文案',
  printBtnText: '打印文案',
  excelBtnText: '导出文案',
  updateBtnText: '修改文案',
  saveBtnText: '保存文案',
  cancelBtnText: '取消文案',
  printBtn: true,
  excelBtn: true,

 

列属性
  label:“租户ID”,//列名称
  prop:“id”,//列字段
  type:“input”,//input/number/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
  placeholder:“请输入租户ID”,//控件提示输入语句
  align:“left”,//列的对其方式，覆盖table的align
  width: 150, //列宽度
  labelWidth:150, //表宽度
  minWidth:“auto”,//列最小宽度
  sortable:false,//排序
  hide:true,//隐藏列 表格起作用
  disabled: true,// 不可编辑
  span:12,//表单栅列
  precision:2,//数字框输入精度（当type为number时）
  search:false,//是否支持搜索
  maxRows:4,//最大行（当type为textarea）
  minRows:2,//最小行（当type为textarea）
  multiple:false,多选（当type为select/tree时）
  format:"",//显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
  valueFormat:"",//真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
  clearable:true,//表单清空
  size:“medium”,//表单大小medium/small/mini
  editDisabled:false,//表单编辑时是否禁止
  editDisplay:false,//表单编辑是否可见
  addDisabled:false,//表单编辑时是否禁止
  addDisplay:false,//表单编辑是否可见
  display:false, //隐藏表单
  slot:false,//列自定义 支持自定义列
  formslot:false,//表单自定义
  fixed:true,//冻结列
  ormWidth:“auto”,//表单宽度
  formHeight:“auto”,//表单行高度
  overHidden:false,//超出隐藏
  rules://表单规则,参考ele表单规则配置Object
  dicData://传入本次需要的静态字典（在column中dicData写对象key值即可加载）
  dicMethod://传入字典的请求方式
  dicQuery://传入字典的请求参数Object
  dicUrl://字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）

<template>
<!-- 基础组件 -->
  <basic-container>
    <!-- <el-button @click='exportHandle'>导出</el-button> -->
    <avue-crud
        设置表格属性
      :option="option"
        用来存取页面的值
      v-model="form"
      获取后台数据
      :data="data"
      :table-loading="loading"
      分页
      :page="page"
      权限控制  操作按钮动态显示
      :permission="permissionList"
      打开前回调
      :before-open="beforeOpen"
       关闭前回调
      :before-close="beforeClose"
       获取dom 结构
      ref="crud"
       数据编辑后出发
      @row-update="rowUpdate"
      新增数据确定后执行
      @row-save="rowSave"
      行删除
      @row-del="rowDel"
       点击搜索后触发该事件
      @search-change="searchChange"
       清空搜索回调方法
      @search-reset="searchReset"
      当选择项发生变化时会触发该事件
      @selection-change="selectionChange"
      @current-change="currentChange"
      点击每页多少条
      @size-change="sizeChange"
      点击刷新
      @refresh-change="onLoad(page)"
      初始化页面
      @on-load="onLoad"
    >
    自定义按钮
      <template slot-scope="scope" slot="menu">
        <el-button   @click="submitHandle(scope.row)">提交</el-button
        >
      <template slot-scope="{ row }" slot="status">
        <el-tag v-if="row.status == 0">待审</el-tag>
        <el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      type: "",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        // 弹框文字提示
        tip: false,
        // 边框
        border: true,
        // 操作
        menu: fales,
        // 显示序号
        index: true,
        // 序号标题
        indexLabel: "序号",
        //打印按钮
        printBtn: true    
       // 刷新按钮    
        refreshBtn: true    
        // 查看按钮
        viewBtn: true,
        // 行内编辑按钮
        editBtn: false,
        // 行内删除
        delBtn: false,
        //首次加载是否显示搜索
        searchShow: true, 
        // selection: true,
        column: [
          {
            label: "请假人",
             //匹配后端字段
            prop: "userId",
           //输入框状态控制 默认为input
            type: "tree",
            // 搜索栏目自定义内容 同时控制页面显示隐藏
            search: true,
             //表单编辑时是否禁止输入
            editDisabled: true, 
            //表单新增时是否禁止输入
            addDisabled: true, 
            //隐藏显示当前项
            display: false,
           // 表单新增是可见
            addDisplay: false,
             // 表单查看是否可见
            viewDisplay: true,
            // 编辑按钮是否可见
            editDisplay: false,
             // 隐藏列
            hide: true,
            //选着多个
             multiple: true,
            // 传入静态字典
            dicData: [],
            // 字典参数   props 匹配后台字段
            props: {
              value: "sysId",
              label: "name",
            },
            //字典地址
             dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",
             //格式
　　　　　　　 formatter: (row,value,label,column) => {
               return label = value
             },
            //验证
            rules: [
              {
                required: true,
                message: "请选择请假人",
                trigger: "blur",
              },
            ],
          },
      data: []
      };
  },
  mounted() {
    // 当字典数据需要前端转换时   获取请假人id 通过接口 添加字典数据
    personnel(1, 10000, {
      is_deleted: 0,
    }).then((res) => {
      this.option.column.forEach((item) => {
        if (item.prop == "userId") {
          item.dicData = res.data.data.records;
        }
      });
    });
  },
  methods: {
  onLoad(page, params = {}) {
      this.loading = true
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
      //渲染数据
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>
</style>