# vue-gyc-ui

**Repository Path**: guoyuanchao/vue-gyc-ui

## Basic Information

- **Project Name**: vue-gyc-ui
- **Description**: 在vue+element-ui的基础上高度封装适合做项目的表格和表单组件。包括query,add,edit,update,delete方法和分页条。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-06
- **Last Updated**: 2025-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 动态表格+表单组件+TREE

### 安装

```
npm i element-ui
npm i vue-gyc-ui
```

### main.js 代码

```javascript
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import vueGycUi from "vue-gyc-ui";
Vue.use(ElementUI, { size: "medium" }).use(vueGycUi,{
     globleBtnStyle: {
        size: "medium", type: 'primary', plain: false, round: false, circle: false, plain: true, icon: undefined
    },
    btnStyle: {
        save: { size: 'small', icon: 'el-icon-ss' },
        read: { type: 'text', plain: false },
        edit: { type: 'text', plain: false },
        del: { type: 'text', plain: false, style: 'color:red;' },
        cancel: { text: '关闭' }

    },
    //=================FORM=======================  
    //FORM 底部按钮对齐方式letf|center|right
    formFooterAlign: () => "center",
    //FORM 项标题分散对齐
    formLabelJustify: () => false,
    //FORM 显示验证错误消息
    showErrMessage: () => true,
    //================TABLE=======================
    //TABLE 上下查询风格或左右查询风格
    queryH: true,
    //TABLE 分页条显示位置letf|center|right|flex-end|flex-start
    page_align: () => 'flex-end',
    //TABLE 查询标题分散对齐
    queryLabelJustify: () => false,
    //TABLE 查询标题宽度
    queryLabelWidth: () => 55,
    //TABLE 查询输入宽度
    queryInputWidth: () => 160,
    //TABLE 表格右侧操作按钮显示位置letf|center|right|flex-end|flex-start
    controlAlign: () => 'center',
    //TABLE 表格列默认宽度 默认120px
    dWidth: () => '120px',
    //TABLE 列设置宽度
    setWidth: () => '578px',
});
```

---

###### 示例

```html
<template>
  <div style="display: flex; width: 100%; height: 100%">
    <!--列表显示数据-->
    <div style="display: flex; width: 100%; height: 100%">
      <div style="display: flex; width: 100%; height: 100%">
        <div
          style="
            display: flex;
            padding: 10px;
            margin: 10px;
            width: 150px;
            overflow: auto;
            height: calc(100vh - 40px);
          "
        >
          <g-tree
            style="height: 100%; overflow: auto; display: flex"
            @delete="(a, b) => b(true)"
            :load="loadDataById"
            :props="defaultProps"
            nodeKey="cbid"
            @add-next="treeAdd"
            @update="treeUpdate"
            :tree-columns="tree_col"
            @saveData="treeSaveData"
          ></g-tree>
        </div>
        <div style="display: flex; flex: 1">
          <g-table
            ref="tb"
            style="width: 99.9%"
            :tableAttrs="tdata"
            fixedHeight="calc(100vh - 115px)"
            @add="add"
            @load="load"
            @edit="edit"
            @del="del"
            @dbclick="dbRowClick"
            @read="read"
            :row-style="tableRowClassName"
            :row-class-name="bb"
            :page_align="()=>'center'"
            :queryInfo="queryInfo"
            :queryH="true"
            :disFuncs="['setting', 'more1', 'batch']"
            :leftWidth="250"
            suffix="ok"
            :queryLabel="true"
            :justify="()=>true"
            :sort="{ column: 'retailsale', order: 'asc' }"
            @row-click="rowClick"
            :queryInputWidth="()=>150"
            :sumData="sumData"
            :set-width="()=>'600px'"
            :row_Drop="true"
            :editTable="false"
            :show-message="false"
            @row-drop="drop"
            @select="tbselect"
            @select-all="tbselect"
            @batch-handle="batchHandle"
            @row-save="rowSave"
            @qx="
              (item, callback) => {
                callback({
                  read: () => true, //这里控制表格行查看功能
                  edit: () => true, //这里控制表格行编辑功能
                  del: () => item, //这里控制表格行删除功能
                  save: () => true,
                });
              }
            "
            :pagesizeList="[10, 50, 100]"
          >
            <!-- :btnsWidth="390" -->
            <!-- :disFuncs="['query','edit', 'del', 'read', 'page', 'control'，'more']" -->
            <div slot="imgurl">这里可以替换表格显示内容</div>
            <!-- <el-button type="danger" slot="del" @click="del">delete</el-button> -->
            <div slot="lbtn">
              <el-button type="text" style="margin-right: 2px">左边</el-button>
            </div>
            <div slot="rbtn">
              <el-button type="text">右边</el-button>
            </div>
            <!-- <div slot="page">这里可以重写分页条</div> -->
            <div
              slot="addright"
              style="display: inline-flex; flex-wrap: wrap; margin-right: 10px"
            >
              <el-button type="success" @click="test">测试表单</el-button>
            </div>
            <!-- <div slot="querydata" style="display: flex; flex: 1">222</div> -->
            <!-- <div slot="query">这里重写查询事件</div>
            <div slot="add">这里重写增加事件</div> -->
            <!-- <div slot="edit" slot-scope="scope" v-if="scope.info.amountxs == 0">
              {{ scope.name }}
            </div> -->
            <div slot="query-age-dict" slot-scope="data">{{ data.info }}</div>
            <div slot="query-company-autocomplete" slot-scope="data">
              {{ data.info.value }}
            </div>
            <!-- <div slot="header-retailsale">333</div> -->
            <div slot="query-java-customize" slot-scope="data">
              <el-input
                v-model="data.info.val"
                :placeholder="data.info.remark"
              ></el-input>
            </div>
            <!-- <div slot="setting">222</div> -->
            <div slot="more1">更多筛选</div>
            <div slot="goodstags" slot-scope="data">
              {{ data.info }}
            </div>
            <!-- <div slot="g-table">重写表格</div> -->
            <div slot="header-fl2" style="display: inline-flex">77</div>
            <div slot="fl2" style="display: inline-flex">88</div>
            <div
              slot="batch"
              slot-scope="data"
              style="display: inline-flex; margin-right: 10px"
            >
              <el-button type="primary">{{
                "批量" + data.info.length
              }}</el-button>
            </div>
            <!-- <div slot="line-edit">444</div> -->
          </g-table>
        </div>
      </div>
    </div>
    <!--增加form表单-->
    <g-add-form
      :isModel="true"
      :is="isshow"
      :fullscreen="false"
      :formAttrs="currdata"
      :formInfo="formInfo"
      :showFooter="true"
      @saveData="saveData"
      @close="isshow = undefined"
      :commitText="()=>'save'"
      :cancelText="()=>'exit'"
      :showCommitBtn="showCommitBtn"
      :showCancelBtn="true"
      center="center"
      @toDoChange="toDoChange"
      :border="false"
      :showErrMessage="()=>true"
      :justify="()=>true"
    >
      <!-- <div slot="add-title">这里可以替换title</div> -->
      <!-- <div slot="add-footer">这里可以替换footer</div> -->
      <!-- <div slot="label-goodsname" slot-scope="data">
      <div>{{ data.info.title }}</div>
      </div> -->
      <div slot="arrgoodstags" slot-scope="scope">
        <el-input
          :style="`margin-right:1px;width: ${
            (188 - scope.info.arrgoodstags.length) /
            scope.info.arrgoodstags.length
          }px;`"
          v-for="(item, index) in scope.info.arrgoodstags"
          :key="index"
          v-model="scope.info.arrgoodstags[index]"
        >
        </el-input>
      </div>
      <!-- <div slot="goodsname" slot-scope="data">
        <el-input style="width: 188px" v-model="data.info.goodsname"></el-input>
      </div> -->
      <!-- <div slot="spareRBtn" style="display: inline-flex; margin-left: 300px">
        <el-button>右边增加备用按钮</el-button>
      </div> -->
      <div slot="auto-autocomplete" slot-scope="scope">{{ scope.info }}</div>
      <div slot="sex-dict" slot-scope="scope">
        <div>性别：{{ scope.info }}</div>
      </div>
      <div slot="bj1">
        <div style="width: 655px; margin: 0px -54px 0 -10px; display: flex">
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        </div>
      </div>
      <div slot="bj2">
        <div
          :style="`width: 710px;margin: 0px -104px 0 -30px;display: flex;align-items: center;padding-left: 50px;`"
        >
          <span>雨纷纷</span>
          <el-divider direction="vertical"></el-divider>
          <span>旧故里</span>
          <el-divider direction="vertical"></el-divider>
          <span>草木深</span>
        </div>
      </div>
      <div slot="upload-upload">上传</div>
      <div slot="upload-upload-tip">上传提示信息</div>
    </g-add-form>
  </div>
</template>
```

```javascript
<script>
import dayjs from "dayjs";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      currdata: {},
      showCommitBtn: true,
      formInfo: undefined,
      isshow: undefined,
      formAttrs: {
        username: {
          title: "姓名",
          val: "刘麻子",
          required: true,
          width: 202,
          trigger: "change",
          //regular: "[A-Z0-9]{2,5}",
          validate: (a, form) => {
            console.log(form);
            return a.length !== 4;
          },
        },
        age: {
          title: "年龄",
          val: 18,
          number: true,
          width: 202,
          max: 100,
          min: 16,
          trigger: "change",
        },
        company: { title: "公司", val: "", max: 10, width: 202 },
        sex: {
          title: "性别",
          val: "0",
          dicts: [
            { label: "男", value: "1" },
            { label: "女", value: "0" },
          ],
          change: (a, b) => {
            console.log(a);
            console.log(b);
          },
          query: (words, callback) => {
            callback([
              { label: "男", value: "1" },
              { label: "女", value: "0" },
            ]);
          },
        },
        date: {
          title: "日期",
          val: "",
          required: true,
          date: true,
          options: {
            disabledDate(time) {
              return time.getTime() > Date.now() + 12 * 3600 * 7;
            },
            shortcuts: [
              {
                text: "一年后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 12);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "半年后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 6);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一月后",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() + 1);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周后",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "今天",
                onClick(picker) {
                  picker.$emit("pick", new Date());
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一月前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 1);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "三月前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 3);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "半年",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 6);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一年前",
                onClick(picker) {
                  const date = new Date();
                  date.setMonth(date.getMonth() - 12);
                  picker.$emit("pick", date);
                },
              },
            ],
          },
          //time: true,
          change: (data) => {
            console.log(data);
          },
        },
        time: {
          title: "时间",
          required: true,
          val: "",
          time: true,
          date: true,
          change: (data) => {
            console.log(data);
          },
        },
        leval: {
          title: "等级",
          required: true,
          val: 3,
          radio: [1, 2, 3],
          labels: ["大", "中", "小"],
          change: (data) => {
            console.log(data);
          },
        },
        bj1: { bj: true, itemLabelWidth: 0 },
        hobby: {
          title: "爱好",
          val: [10],
          checkbox: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          labels: [
            "乒乓球",
            "跑步",
            "吃鱼",
            "打球",
            "开车",
            "看书",
            "打游戏",
            "上网",
            "cosplay",
            "movie",
          ],
          width: 624,
          change: (data) => {
            console.log(data);
          },
        },
        remark: { title: "备注", val: "", area: true, width: 624, max: 200 },
        bj2: { bj: true, itemLabelWidth: 0 },
        email: {
          title: "邮箱",
          val: "myemail@qq.com",
          email: true,
          required: true,
          width: 624,
        },
        auto: {
          title: "自动加载",
          val: "",
          autocomplete: true,
          triggerOnFocus: false,
          popperAppendToBody: true,
          valueKey: "name",
          input: (a, form) => {
            console.log(a, form);
          },
          fetch_suggestions: (querystr, back) => {
            back([{ name: "222" }, { name: "333" }]);
          },
          auto_select: (a, b) => {
            alert(2);
            console.log(a, b);
          },
          width: 624,
        },
        switch: {
          title: "开关",
          switch: true,
          val: 1,
          // trueColor: "red",
          // falseColor: "blue",
          activeValue: 1,
          switchWidth: 100,
          change: (data) => {
            console.log(data);
          },
        },
        upload: {
          title: "上传",
          val: "",
          upload: true,
          fileList: [],
          action: "https://jsonplaceholder.typicode.com/posts/",
          listType: "picture",
        },
      },
      tdata: {
        goodsid: {
          title: "配件ID",
          val: 0,
          number: true,
          //visible: false,
          type: "selection",
        },
        goodstags: {
          title: "标签",
          val: "",
          // col_width: 150,
          suffix: true, // "el-icon-edit",
          prefix: "$",
          password: false,
          disable: true,
          // alwaysShow: true,
          num: -100,
          tooltip: true,
          click: (data) => {
            alert("hello world!");
          },
        },
        amount: {
          alwaysShow: true,
          num: 11,
          title: "数量",
          required: true,
          filterClass: "arrgoodstags",
          editTable: true,
          required: true,
          val: undefined,
          placeholder: "输入数字",
          number: true,
          // regular: "\\d+",
          tooltip: true,
          prefix: "￥",
          col_width: 120,
          required: true,
          trigger: "blur",
          //suffix: "<B style='color:red;'>元</B>",
          click: (data) => {
            //todo()
          },
          change: (data) => {
            console.log(data);
          },
          input: (a, b) => {
            console.log(a, b);
          },
        },
        biaoji: {
          title: "标记",
          sortable: false,
          visible: false,
          filterClass: "arrgoodstags",
          children: [
            { key: "fl1", title: "标记一", val: 1 },
            {
              key: "fl2",
              title: "标记二",
              val: "5555",
              number: true,
              html: (b, a) => {
                return "<div style='color:red'>098</div>";
              },
              // autocomplete: true,
              // valueKey: "name",
              // fetch_suggestions: (querystr, back) => {
              //   back([{ name: "222" }, { name: "333" }]);
              // },
              // auto_select: (a, b) => {
              //   alert(1);
              //   console.log(a, b);
              // },
              width: 624,
            },
          ],
        },
        wareid: {
          title: "配件编号",
          val: 0,
          num: 8,
          number: true,
          visible: false,
          edit: false,
        },
        // arrgoodstags: {
        //   title: "TB标签",
        //   val: ["", "", ""],
        //   sortable: false,
        //   filterClass: "arrgoodstags",
        //   num: -101,
        //   editTable: true,
        // },
        retailsale: {
          title: "成功价",
          val: 0,
          number: true,
          range: [1, 10],
          col_width: 120,
          sortable: false,
          //suffix: "$",
          decimals: 2,
          editTable: true,
          clearable: true,
          required: true,
        },
        goodsname: {
          title: "配件名称",
          val: "555",
          tooltip: true,
          //visible: false,
          // num: 2,
          // max: 5,
          editTable: true,
          col_width: 200,
          formart: "6666",
          style: (a, b, c) => {
            return c % 2 == 0
              ? { color: "red", background: "blue", padding: "10px" }
              : "";
          },
          range: [4, 30],
          change: (a) => {
            console.log(a);
          },
        },
        imgurl: { title: "图片路径", val: "mall/00ef4g", tooltip: true },
        sale: {
          title: "销售价",
          val: 865.0,
          number: true,
          // decimals: 2,
          // suffix: "$",
          prefix: "￥",
          editTable: true,
          change: (v) => {
            console.log(v);
          },
        },
        amountxs: {
          title: "销售数量",
          val: 20,
          number: true,
          editTable: true,
          placeholder: "20-60之间",
          // range: [20, 60],
          col_width: 120,
          //regular: "[2-5]\\d",
          suffix: "$",
        },
        statetag: {
          title: "状态",
          val: 1,
          tooltip: true,
          dicts: [{ label: "禁用", value: 0 }],
        },
        jbstr: {
          title: "角标",
          val: "",
          width: 624,
          placeholder: "请输入a",
          clearable: true,
          // regular: "[a]",
          required: true,
          editTable: true,
        },
        remark: {
          title: "备注",
          val: "Thermo King 。",
          tooltip: true,
          area: true,
          width: 624,
          num: 10000,
          max: 200,
        },
      },
      queryInfo: {
        vis: {
          val: "99",
          remark: "888",
          label: "测试",
          inVisible: true,
        },
        test: {
          val: "",
          remark: "测试查询",
          clearable: true,
          label: "测试查询",
          more: true,
          //labelWidth: 400,
          //width: 300,
        },
        username: {
          val: "",
          remark: "请输入姓名",
          label: "请输入姓名",
          date: true,
          //width: 1000,
          more: true,
          //labelWidth: 400,
        },
        age: {
          val: 0,
          remark: "年龄查询",
          label: "年龄查询",
          dicts: [
            { label: "男", value: 0 },
            { label: "女", value: 1 },
          ],
          query: (a, b) => {
            b([
              { label: "男", value: 0 },
              { label: "女", value: 1 },
            ]);
          },
          change: (form, item) => {
            console.log(form);
            console.log(item);
          },
        },
        maxdate: {
          val: "",
          remark: "开始时间",
          label: "开始时间",
          clearable: true,
          date: true,
          more: true,
          dateOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [
              {
                text: "今天",
                onClick(picker) {
                  picker.$emit("pick", new Date());
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
            ],
          },
          change: (a) => {
            console.log(a);
          },
        },
        mindate: {
          val: "",
          remark: "结束时间",
          label: "结束时间",
          clearable: true,
          date: true,
          more: true,
        },
        timespan: {
          keys: ["atime", "atime1"],
          vals: [new Date(), new Date()],
          remark: "时间段查询",
          label: "时间段查询",
          clearable: true,
          daterange: true,
          more: true,
          width: 240,
          change: (a, b) => {
            console.log(a, b);
          },
        },
        bs: {
          keys: ["btime", "btime1"],
          vals: ["", ""],
          remark: "时间段查询",
          label: "时间段查询",
          clearable: true,
          daterange: true,
          more: false,
          width: 240,
          change: (val) => {
            console.log(val);
          },
        },
        company: {
          key: "company",
          val: "",
          remark: "自动查询",
          label: "自动查询",
          //valueKey: "value",
          autocomplete: true,
          fetch_suggestions: (a, b) => {
            b([{ value: 122 }]);
          },
          auto_select: (iten) => {
            alert(iten);
          },
        },
        java: {
          val: "",
          remark: "定制",
          label: "定制",
          customize: true,
          more: true,
        },
      },
      sumData: { amount: 0, goodstags: "合计" },
      defaultProps: {
        label: "cbname",
        children: "list",
        isLeaf: (data) => {
          return data.lastnode == 1;
        },
      },
      tree_col: [
        { key: "superior", title: "上级" },
        { key: "itemName", title: "名称" },
      ],
      selectRow: [],
    };
  },
  methods: {
    rowSave(row, index, back) {
      console.log(row, index);
      back(4);
    },
    batchHandle(data) {
      console.log(data);
    },
    tbselect(selection) {
      console.log(selection);
    },
    drop({ oldIndex, newIndex }) {
      console.log({ oldIndex, newIndex });
    },
    treeAdd(node, data) {
      this.tree_col[0].edit = true;
      data.superior = node.cbname;
    },
    treeUpdate(node, data) {
      this.tree_col[0].edit = false;
      data.itemName = node.cbname;
    },
    treeSaveData(data, back) {
      back(true);
    },
    async loadDataById(node, resolve) {
      if (node.level == 0) {
        return resolve([
          {
            pcbid: 0,
            cbid: 0,
            cbname: "所有品牌",
            lastnode: 0,
            id: 0,
          },
        ]);
      } else {
        return resolve([
          {
            cbname: "长安",
            pcbid: 0,
            cbid: 100,
            noused: 0,
            lastnode: 0,
            fullname: "长安",
          },
          {
            cbname: "比亚迪",
            pcbid: 0,
            cbid: 101,
            noused: 0,
            lastnode: 0,
            fullname: "比亚迪",
          },
          {
            cbname: "哈弗",
            pcbid: 0,
            cbid: 191,
            noused: 0,
            lastnode: 0,
            fullname: "哈弗",
          },
          {
            cbname: "日产",
            pcbid: 0,
            cbid: 211,
            noused: 0,
            lastnode: 0,
            fullname: "日产",
          },
          {
            cbname: "奥迪",
            pcbid: 0,
            cbid: 225,
            noused: 0,
            lastnode: 0,
            fullname: "奥迪",
          },
          {
            cbname: "奔驰",
            pcbid: 0,
            cbid: 302,
            noused: 0,
            lastnode: 0,
            fullname: "奔驰",
          },
        ]);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      let styleRes = {
        // background: "red !important",
      };
      return styleRes;
    },
    bb() {
      //return "bb";
      return "";
    },
    rowClick(row, column, event) {
      // console.log(row);
      // console.log(column);
      // console.log(event);
    },
    toDoChange(data) {
      if (data.ov.sale !== undefined && data.nv.sale != data.ov.sale) {
        // console.log(data.nv.sale + "---" + data.ov.sale);
      }
    },
    dbRowClick(a, b, c, d) {
      d(true);
      alert("dbclick default ok");
    },
    //测试表单
    test() {
      this.currdata = this.formAttrs;
      this.formInfo = undefined;
      this.isshow = "g-add-form";
    },
    //初始数据
    async load(obj, callback) {
      obj.pagesize = 5;
       let { list, total } = demoData.data;
      let page = parseInt(obj.page);
      console.log(obj.page, obj.pagesize);
      callback(list.filter((a, index) => index > (page - 1) * 10 && index < (page * 10)), total, (a, b) => a.goodsid == b.goodsid);
      this.sumData = {
        amount: 1022200,
        goodstags: "合计",
        remark: "合计备注",
        remark1: "合计备注",
        retailsale: 3000,
      };
    },
    //增加
    add() {
      this.formInfo = undefined;
      this.currdata = this.tdata;
      this.showCommitBtn = true;
      this.isshow = "g-add-form";
    },
    //删除
    del(data, callback) {
      alert("ok");
      callback(true);
      //callback("删除失败了");
    },
    //编辑
    edit(data) {
      let dict = this.tdata.statetag.dicts;
      dict.dicts = [{ label: "禁用", value: 1 }];
      dict.val = data.statetag;
      this.currdata = this.tdata;
      this.showCommitBtn = true;
      this.formInfo = data;
      this.isshow = "g-add-form";
    },
    //查看详情
    read(data) {
      this.currdata = this.tdata;
      this.showCommitBtn = false;
      this.formInfo = data;
      this.isshow = "g-add-form";
    },
    //保存数据
    saveData(data, callback) {
      //alert("保存成功，请在这里处理数据保存！");
      // callback(false);
      // this.isshow = undefined;
    },
  },
  mounted() {
    //this.$refs.ttb.get_data_list(1, { aa: "55" });
  },
};
</script>
```

---

#### 表单参数列表

| 参数           | 说明                                                                      |   类型   |                  默认值                  | 可选值            |
| :------------- | :------------------------------------------------------------------------ | :------: | :--------------------------------------: | :---------------- |
| isModel        | 是否弹窗                                                                  | Boolean  |                   true                   | true,false        |
| fullscreen     | 全屏                                                                      | Boolean  |                  false                   | ---               |
| title          | 表单标题                                                                  |  String  |                   新增                   | String            |
| formAttrs      | 表单项属性（详情见表单项参数列表）                                        |  Object  |                    {}                    | ---               |
| formInfo       | 编辑实体                                                                  |  Object  |                    {}                    | ---               |
| width          | 表单宽度                                                                  |  Number  |                   720                    | ---               |
| isreadonly     | 是否禁用表单                                                              | Boolean  |                  false                   | ---               |
| center         | 底部操作按钮是否居中                                                      | Function |                  center                  | center,left,right |
| commitText     | 提交按钮文本                                                              | Function |                   提交                   | ---               |
| cancelText     | 取消按钮文本                                                              | Function |                   取消                   | ---               |
| showCommitBtn  | 是否显示提交按钮                                                          | Boolean  |                   true                   | ---               |
| showCancelBtn  | 是否显示取消按钮                                                          | Boolean  |                   true                   | ---               |
| showFooter     | 是否显示底部操作按钮                                                      | Boolean  |                   true                   | ---               |
| itemWidth      | 表单项宽度                                                                |  Number  |                   308                    | ---               |
| labelWidth     | 表单项标题宽度                                                            |  Number  |                   120                    | ---               |
| border         | 表单表格是否显示边框                                                      | Boolean  |                  false                   | true,false        |
| showErrMessage | 是否显示验证错误信息                                                      | Function |                  false                   | true,false        |
| justify        | 表单label是否分散对齐                                                     | Function |                  false                   | true,false        |
| btnType        | 设置表单操作列按钮类型 例如 {commit:{type:'info'},cancel:{type:'danger'}} |  Object  | primary-success-warning-danger-info-text | ['text']          |

#### 表单项参数列表

|        参数        | 说明                                                                                                 | 类型                         |   默认值   |
| :----------------: | :--------------------------------------------------------------------------------------------------- | :--------------------------- | :--------: |
|        key         | 表单项绑定值 key (formAttrs.key值)，后面所有项是value值 如：model:{key:'key1',{title:'t1',val:'v1'}} | String                       |    ---     |
|       title        | 表单项标题                                                                                           | String                       |    ---     |
|        val         | 表单项的值                                                                                           | any                          |    any     |
|       change       | 表单项值改变触发事件                                                                                 | Function(data)参数是表单数据 | undefined  |
|      -------       | 表单项默认类型是 text 类型,input 输入框                                                              | -----                        |    ----    |
|       width        | 表单项宽度                                                                                           | Number                       | undefined  |
|     labelWidth     | lable 宽度                                                                                           | Number                       |    100     |
|        edit        | 表单项设置 false 则不显示编辑项                                                                      | Boolean                      | undefined  |
|      disable       | 表单项是否禁用状态                                                                                   | Number                       | undefined  |
|       number       | 数字输入框                                                                                           | Boolean                      | undefined  |
|      password      | 文本输入框有效，设置后变成密码框                                                                     | Boolean                      | undefined  |
|       prefix       | 文本输入框或数字输入框的前缀                                                                         | String                       | undefined  |
|       suffix       | 文本输入框或数字输入框的后缀，如果设置为 true，显示默认的三个点                                      | Boolean,String               | undefined  |
|       click        | suffix 单击后缀执行事件                                                                              | Function(data)参数是表单数据 | undefined  |
|        date        | 日期输入框                                                                                           | Boolean                      | undefined  |
|        time        | 时间输入框 date:true,time:true                                                                       | Boolean                      | undefined  |
|    dateOptions     | 时间日期选择器特有的选项 通过一个方法返回一个对象                                                    | Function(form)               |     {}     |
|       dicts        | 选择框初始值。格式[{label:title,value:val}]                                                          | Array                        |     []     |
|       query        | 选择框查询方法,执行 callBack 方法赋值给 dicts                                                        | Function(words,callBack)     | undefined  |
|    defaultEmpty    | 默认设空值，否则默认为第一项                                                                         | true,false,undefined         | undefined  |
|        area        | 多行方本框                                                                                           | Boolean                      | undefined  |
|       radio        | 单选框                                                                                               | Array                        |     []     |
|      checkbox      | 多选框                                                                                               | Array                        |     []     |
|       labels       | 单选框和多选框有效，显示单选框和多选框字段，和 values 数组长度等长                                   | Array                        |     []     |
|       switch       | 开关                                                                                                 | Boolean                      | undefined  |
|     trueColor      | 开关有效,选中时背景色                                                                                | String                       |  #13ce66   |
|     falseColor     | 开关有效,未选中时背景色                                                                              | String                       |  #ff4949`  |
|    switchWidth     | 开关有效,开关长度                                                                                    | number                       |    ---     |
|    autocomplete    | 输入建议框                                                                                           | Boolean                      | undefined  |
| fetch_suggestions  | 建议框有效，callback([])返回建议数组                                                                 | Function(words,callback)     | undefined  |
|    auto_select     | 建议框有效，处理数选中后操作                                                                         | Function(item,items)         | undefined  |
|      valueKey      | 建议框有效，输入建议对象中用于显示的键名                                                             | string                       |   value    |
|    popperClass     | Autocomplete 下拉列表的类名                                                                          | string                       |   -----    | ---- |
|   triggerOnFocus   | 是否在输入框 focus 时显示建议列表                                                                    | Boolean                      | true,false | true |
| popperAppendToBody | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false                   | Boolean                      | true,false | true |
|         bj         | 标记项，可以设置分割线，ui 其他标记                                                                  | Boolean                      | undefined  |
|       upload       | 文件上传，参数详见 element-ui-upload 文档                                                            | true                         | undefined  |
|       goAdd        | 选择框搜索为空时定义方法                                                                             | Function(form,item)          | undefined  |


#### 表单 Events

| 事件名称 | 说明                 | 回调参数      |
| :------: | :------------------- | :------------ |
| saveData | 保存表单数据         | form 对象数据 |
|  close   | 关闭表单窗体执行事件 | ---           |

---

#### validate 验证

| 校验规则 | 说明                       | 值                                                                                                       |
| :------: | :------------------------- | :------------------------------------------------------------------------------------------------------- |
| required | 不能为空                   | true,false                                                                                               |
|  email   | 邮箱格式                   | true,false                                                                                               |
|   url    | 网址                       | true,false                                                                                               |
|   len    | 字符串长度                 | number                                                                                                   |
|  range   | 数字范围                   | anrry 例如：[10,20]  数字类型验证范围，字符串验证长度范围                                                |
|   max    | 字符串最大长度或数字最大值 | number                                                                                                   |
|   min    | 数字最小值                 | number                                                                                                   |
| regular  | 正则表达式                 | string 例如：'[a-z]'                                                                                     |
| validate | 自定义验证                 | function(val,form){return true} 返回 true（验证通过） 或 false（验证未通过，默认消息）或string(错误消息) |

#### 表单自定义验证示例

```javascript
formAttrs: [
  {
    key: "name",
    title: "姓名",
    val: "",
    required: true, //必填
    //自定义验证
    validate: (val)=>{ return true}
    },
  },
  { key: "age", title: "年龄", val: "18", number: true }, //数字
  { key: "company", title: "公司", val: "", max: 10 }, //最大长度
  {
    key: "url",
    title: "日期",
    val: "",
    date: true, //日期
    width: 650,
  },
];
```

#### 表单 slot 重写

#### 表单项各项都可以用插槽重写，slot name=item.key

```html
<g-add-form :formAttrs="currdata" :height="180">
  <div slot="name">这里可以放任何HTML</div>
  <div slot="age">这里替换编辑控件</div>
</g-add-form>
```

|         name          | 说明                   |
| :-------------------: | :--------------------- |
|       item.key        | 重写表单项             |
|    label-item.key     | 重写表单项 label       |
|       add-title       | 重写弹窗标题           |
|      add-footer       | 重写弹窗 footer        |
|     item.key-dict     | 重写 Select 控件显示项 |
| item.key-autocomplete | 重写建议框显示项       |
|    item.key-upload    | 重写上传点击按钮       |
|  item.key-upload-tip  | 重写上传提示文本       |
|       spareLBtn       | 在提交和取消前面增加UI |
|       spareRBtn       | 在提交和取消后面增加UI |

---

#### 表格参数列表

|        参数        | 说明                                                                                  |   类型   | 可选值                                                | 默认值     |
| :----------------: | ------------------------------------------------------------------------------------- | :------: | ----------------------------------------------------- | ---------- |
|     tableAttrs     | 表格 column 属性数组（见表格 column 属性）                                            |  Object  | {}                                                    | []         |
|       height       | 计算表格高度 100vh-height=table 的高度                                                |  Number  | ---()                                                 | 100        |
|    fixedHeight     | 表格固定高度                                                                          |  string  | px % vh calc                                          | undefined  |
|     btnsWidth      | 表格行操作按钮宽度                                                                    |  Number  | ---                                                   | 185        |
|        sort        | 排序对象{key:参数名,value:排序方式(字段名 asc,desc)}                                  |  Object  | undefined ---                                         | ---        |
|     page_align     | 分页条显示方式                                                                        | Function | left ,center, right                                   | center     |
|      disFuncs      | 过滤表格功能[操作，编辑，删除，查看，分页，表头，查询，更多]                          |  Array   | [control,edit, del,read,page,setting,query,core]      | undefined  |
|       suffix       | 表名后缀，一个页面多个表格时需要增加                                                  |  String  | ---                                                   | ---        |
|      btnType       | 设置表格操作列按钮类型 例如 {add:{type:'info'},edit:{type:'danger'}}                  |  Object  | primary / success / warning / danger / info / text    | ['text']   |
|      row_Drop      | 行拖拽                                                                                | Boolean  | true,false                                            | false      |
|     queryInfo      | 表格检索对象数组，项属性见后面检索项文档                                              |  Array   | --- ---                                               | ---        |
|       queryH       | 是否横向生成检索框组，否则纵向生成检索框组                                            |  Number  | ---                                                   | 200        |
|     leftWidth      | 左侧查询宽度 竖形查询时有效                                                           | Boolean  | true,false ---                                        | ---        |
|     queryLabel     | 是否显示查询 label                                                                    | Boolean  | true,false ---                                        | true       |
|  queryLabelWidth   | 查询 label 宽度                                                                       | Function | ---                                                   | 0          |
|  queryInputWidth   | 查询输入框宽度                                                                        | Function | ---                                                   | 0          |
|      justify       | 查询标题分散对齐                                                                      | Function | undefined ---                                         | ---        |
|    popoverWidth    | 查询弹窗宽度                                                                          |  String  | 150px                                                 | ---        |
|   popoverOffset    | 查询弹窗偏移量                                                                        |  Number  | ---                                                   | ---        |
|      sumData       | 合计 格式：{key:val}                                                                  |  Object  | ---                                                   | undefined  |
|      rowStyle      | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。         | Function | Function({row, rowIndex})/Object                      | ---        |
|    rowClassName    | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。         | Function | Function({row, rowIndex})/String                      | ---        |
|     cellStyle      | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function | Function({row, column, rowIndex, columnIndex})/Object | ---        |
|   cellClassName    | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function | Function({row, column, rowIndex, columnIndex})/String | ---        |
|    pagesizeList    | pagesize list                                                                         |  Array   | [5, 10, 15, 20, 50, 100]                              | ---        |
|     batchName      | 批量处理按钮文字                                                                      |  String  | ----                                                  | '批量处理' |
|     editTable      | 开启表格编辑                                                                          | Boolean  | ----                                                  | false      |
|    show-message    | 表格编辑时，是否显示验证错误消息                                                      | Boolean  | ----                                                  | false      |
|     set-width      | 设置列宽度                                                                            | Function | ---                                                   | 516px      |
|   control-align    | 操作列样式，对齐方式，                                                                | Function | ---                                                   | ---        |
|      d-width       | 表格默认列宽，                                                                        | Function | ---                                                   | 120px      |
| horizontalShowBtns | 是否横向显示查询按钮和操作按钮                                                        | Boolean  | true,false                                            | false      |


#### 表格 column 属性

|    参数     | 说明                                                                                                       |      类型       | 可选值                 | 默认值     |
| :---------: | ---------------------------------------------------------------------------------------------------------- | :-------------: | ---------------------- | ---------- |
|     key     | 表单项绑定值 key (tableAttrs.key值)，后面所有项是value值 如：tableAttrs:{key:'key1',{title:'t1',val:'v1'}} |     String      | ---                    |
|    title    | 对应列显示的标题                                                                                           |     String      | ---                    | ---        |
|     val     | 对应列值                                                                                                   |       any       | ---                    | ---        |
|    type     | selection 显示多选框；index 显示该行的索引；expand 显示为一个可展开的按钮                                  |     String      | selection/index/expand | ---        |
|  col_width  | 列宽度                                                                                                     |     String      | ---                    | 100px      |
|    align    | 列显示方式                                                                                                 |     String      | left ,center, right    | center     |
|  sortable   | 列排序                                                                                                     |     Boolean     | true,false,undefined   | undefined  |
|   tooltip   | 当内容过长被隐藏时显示                                                                                     |     Boolean     | true,false,undefined   | undefined  |
|    fixed    | 列是否固定在左侧或者右侧，true 表示固定在左侧                                                              | string, boolean | true, left, right      | ---        |
|   visible   | 设置为 false 则此项不显示在表格中                                                                          |     boolean     | true,false,undefined   | undefined  |
| labelWidth  | 表格项标题宽度                                                                                             |     Number      |                        | undefined  |
| headerAlign | 表头对齐方式，若不设置该项，则使用表格的对齐方式                                                           |     Number      |                        | ----       |
|   format    | 时间格式化                                                                                                 |     string      |                        | dayjs 格式 |
|   prefix    | 前缀                                                                                                       |     string      | ----                   | -----      |
|   suffix    | 后缀                                                                                                       |     string      | ----                   | -----      |
|  decimals   | 小数位数                                                                                                   |     Number      | number                 | 0          |
|     pad     | decimals时，是否用0填充小数位数                                                                            |     Boolean     | true,false             | true       |
|    style    | 样式    style(value,row,index)                                                                             |    function     | ---                    | ---        |
|    html     | 自定义  html(value,row,index)                                                                              |    function     | ---                    | ---        |
| alwaysShow  | 表格设置时永远显示                                                                                         |     Boolean     | true,false             | ---        |
|  editTable  | 编辑模式                                                                                                   |     Boolean     | true,false             | ---        |
|  clearable  | 编辑模式下可清空输入                                                                                       |     Boolean     | true,false             | ---        |

#### 表格 检索项 属性

|        参数        | 说明                                                                               |      类型       | 可选值               | 默认值   |
| :----------------: | ---------------------------------------------------------------------------------- | :-------------: | -------------------- | -------- |
|        key         | 检索 key,传入后台的参数名称                                                        | String 或 Array | ---                  | ---      |
|        val         | 检索值,传入后台的参数值                                                            | String 或 Array | ---                  | ---      |
|       remark       | 标识检索项名称                                                                     |     String      | ---                  | ---      |
|       label        | label 文本                                                                         |     String      | ---                  | ---      |
|     labelWidth     | label 文本长度                                                                     |     Number      | ---                  | 100      |
|     inVisible      | 不显示，只传参数                                                                   |     Boolean     | true,false           | undefend |
|        more        | 生成更多查询,要在表格属性disFuncs中开启more                                        |     boolean     | true,false           | ---      |
|        date        | 生成时间检索框                                                                     |     Boolean     | true,false,undefined | ---      |
|     daterange      | 生成时间段检索框 [key1,key2] [val1,val2]                                           |     Boolean     | true,false,undefined | ---      |
|       dicts        | 生成选择检索框初始对象数组                                                         |      Array      | ---                  | ---      |
|       query        | 选择检索框的数据源                                                                 |    function     | words,callback       | ---      |
|     daterange      | 生成时间段检索框 key 为数组，val 为数组[key1,key2],[val1,val2]                     |     String      | ---                  | ---      |
|    autocomplete    | 生成建议检索框                                                                     |     Boolean     | true,false,undefined | ---      |
|      valueKey      | 建议框有效，输入建议对象中用于显示的键名                                           |     string      | value                |
| fetch_suggestions  | 获取建议检索框数据源                                                               |    Function     | words,callback       | ---      |
|    auto_select     | 建议检索框项选中处理事件                                                           |    Function     | item,itmes           | ---      |
|    popperClass     | Autocomplete 下拉列表的类名                                                        |     string      | -----                | ----     |
|   triggerOnFocus   | 是否在输入框 focus 时显示建议列表                                                  |     Boolean     | true,false           | true     |
| popperAppendToBody | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false |     Boolean     | true,false           | true     |
|     customize      | 生成自定义元素，重写自定义检索项 query-item.key-customize                          |     Boolean     | true,false           | true     |

#### 表格检索项重写 Slot

|            name             | 说明                 |
| :-------------------------: | :------------------- |
|     query-item.key-dict     | 重写选择检索框项显示 |
| query-item.key-autocomplete | 重写建议框项显示     |
|  query-item.key-customize   | 自定义检索项         |

#### Table Events

|      事件名      | 说明                                         | 参数                                                                                          |
| :--------------: | -------------------------------------------- | :-------------------------------------------------------------------------------------------- |
|       load       | 加载表格数据                                 | {page,pagesize},callBack(list,total)                                                          |
|       add        | 新增                                         | -----                                                                                         |
|       edit       | 编辑                                         | rowData,callBack                                                                              |
|       del        | 删除                                         | rowData,callBack                                                                              |
|       read       | 查看详情                                     | rowData                                                                                       |
|     dbclick      | 行双击事件                                   | row，column                                                                                   |
|        qx        | 设置表格操作编辑，删除，查看，保存权限       | item,callback   两个参数，参数 item 传入表格项,callback 返回{edit=>true,del=>true,read=>true} |
|    row-click     | 当某一行被点击时会触发该事件                 | row, column, event                                                                            |
|      select      | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row                                                                                |
|    select-all    | 当用户手动勾选全选 Checkbox 时触发的事件     | selection                                                                                     |
| selection-change | 当选择项发生变化时会触发该事件               | selection                                                                                     |
|   batch-handle   | 表格多选事件                                 | selectedRows                                                                                  |
|     row-save     | 表格行编辑保存                               | row,index,callback callback传入一个参数true,则处理回调，不传或非true则弹出默认保存消息提示    |

#### Table Slot 表单 column 各项都可以用插槽重写，slot name=item.key

```html
<g-table :tableAttrs="tdata" :height="180" :page_align="()=>'flex-end'">
  <div slot="imgurl">这里重写column 显示</div>
  <!-- <el-button type="danger" slot="del" @click="del">重写del</el-button> -->
  <div slot="lbtn">
    <el-button type="warning" style="margin-right: 2px"
      >这里在左边增加功能</el-button
    >
  </div>
  <div slot="rbtn">
    <el-button type="info">这里在右边增加功能</el-button>
  </div>
  <div slot="page">这里可以重写分页ui</div>
</g-table>
```

|      name       | 说明                     |
| :-------------: | :----------------------- |
|     g-table     | 重写表格                 |
|    item.key     | 重写表格 column          |
| header-item.key | 重写表格 column 标题     |
|       add       | 重写增加功能             |
|     addleft     | 在新增左边增加功能       |
|    addright     | 在新增右边增加功能       |
|      query      | 重写查询功能             |
|      read       | 重写查看详情功能         |
|      edit       | 重写编辑功能             |
|       del       | 重写删除功能             |
|      lbtn       | 在操作按钮组左边增加功能 |
|      rbtn       | 在操作按钮组右边增加功能 |
|      page       | 重写分页条               |
|     setting     | 重写表头设置             |
|      more       | 重写更多查询             |
|      more1      | 重写更多查询（弹层样式） |
|      batch      | 批量操作                 |

---

#### tree attribute
|         参数         | 说明                                                 |          类型           | 可选值 | 默认值 |
| :------------------: | ---------------------------------------------------- | :---------------------: | ------ | ------ |
|       treeData       | 展示数据                                             |          array          | ---    | ---    |
|      iconClass       | 自定义树节点的图标                                   |         string          | ---    | ---    |
|         lazy         | 是否懒加载子节点，需与 load 方法结合使用             |         boolean         | ---    | false  |
|       nodeKey        | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 |         String          | ---    | ---    |
|        indent        | 相邻级节点间的水平缩进，单位为像素                   |         number          | ---    | 20     |
|         load         | 加载子树数据的方法，仅当 lazy 属性为true 时生效      | function(node, resolve) | ---    | ---    |
|        props         | 配置选项                                             |         object          | ---    | ---    |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点，               |         boolean         | ---    | true   |
| check-on-click-node  | 是否在点击节点的时候选中节点                         |         boolean         | ---    | false  |
|    add-form-width    | 增加或修改节点弹窗宽度                               |         number          | ---    | 410    |
|     tree-columns     | 增加节点或修改节点实体属性（见表格项属性）           |         Object          | ---    | ---    |

#### tree Events

|      事件名      | 说明                                   | 参数                                                                                                                 |
| :--------------: | -------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |
|    node-click    | 节点被点击时的回调                     | （data, node, self）                                                                                                 |
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | (event, data, node, self, (edit, del,isAddNext) => {this.isdel = del;this.isedit = edit;this.isAddNext=isAddNext;})) |
|     add-next     | 打开增加节点窗口                       | (node,treeItemData)                                                                                                  |
|      update      | 打开修改节点窗口                       | （node, treeItemData）                                                                                               |
|      delete      | 删除节点事件                           | （node,callback(tree或msg))                                                                                          |
|     saveData     | 保存节点事件                           | （data,callback(true或msg)                                                                                           |



#### tree Slot

|  name  | 说明                                      |
| :----: | :---------------------------------------- |
| ------ | 自定义树节点的内容，参数为 { node, data } |


#### 项目地址

[点击跳转至 GITHUB](https://gitee.com/guoyuanchao/vue-gyc-ui)

#### 目前功能正在完善中，欢迎大家加入下面的 QQ 群，我们一起交流吧！

![QQ](https://gitee.com/guoyuanchao/vue-gyc-ui/raw/master/src/assets/vue-gyc-ui.jpg)