vue-gyc-ui v5.5.1

动态表格+表单组件+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>

表单参数列表

表单项参数列表

表单 Events

validate 验证

表单自定义验证示例

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>

表格参数列表

表格 column 属性

表格 检索项 属性

表格检索项重写 Slot

Table Events

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>

tree attribute

tree Events

tree Slot

项目地址

点击跳转至 GITHUB

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