❤
npm
Sign UpSign In

vue-gyc-ui

5.5.3 • Public • Published

动态表格+表单组件+TREE

安装

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

main.js 代码

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',
});
示例
<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>
<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
popperAppendToBody 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false Boolean true,false
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(错误消息)

表单自定义验证示例

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

<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

<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

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

QQ

Readme

Keywords

Package Sidebar

Install

npm i vue-gyc-ui

Repository

gitee.com/guoyuanchao/vue-gyc-ui

Weekly Downloads

195

Version

5.5.3

License

MIT

Unpacked Size

391 kB

Total Files

39

Last publish

Collaborators

  • guoyuanchao
Try on RunKit
Report malware