Socket
Socket
Sign inDemoInstall

vue-gyc-ui

Package Overview
Dependencies
10
Maintainers
0
Versions
265
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-gyc-ui


Version published
Maintainers
0
Install size
36.9 MB
Created

Readme

Source

动态表格+表单组件+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是否弹窗Booleantruetrue,false
fullscreen全屏Booleanfalse---
title表单标题String新增String
formAttrs表单项属性(详情见表单项参数列表)Object{}---
formInfo编辑实体Object{}---
width表单宽度Number720---
isreadonly是否禁用表单Booleanfalse---
center底部操作按钮是否居中Functioncentercenter,left,right
commitText提交按钮文本Function提交---
cancelText取消按钮文本Function取消---
showCommitBtn是否显示提交按钮Booleantrue---
showCancelBtn是否显示取消按钮Booleantrue---
showFooter是否显示底部操作按钮Booleantrue---
itemWidth表单项宽度Number308---
labelWidth表单项标题宽度Number120---
border表单表格是否显示边框Booleanfalsetrue,false
showErrMessage是否显示验证错误信息Functionfalsetrue,false
justify表单label是否分散对齐Functionfalsetrue,false
btnType设置表单操作列按钮类型 例如 {commit:{type:'info'},cancel:{type:'danger'}}Objectprimary-success-warning-danger-info-text['text']
表单项参数列表
参数说明类型默认值
key表单项绑定值 key (formAttrs.key值),后面所有项是value值 如:model:{key:'key1',{title:'t1',val:'v1'}}String---
title表单项标题String---
val表单项的值anyany
change表单项值改变触发事件Function(data)参数是表单数据undefined
-------表单项默认类型是 text 类型,input 输入框---------
width表单项宽度Numberundefined
labelWidthlable 宽度Number100
edit表单项设置 false 则不显示编辑项Booleanundefined
disable表单项是否禁用状态Numberundefined
number数字输入框Booleanundefined
password文本输入框有效,设置后变成密码框Booleanundefined
prefix文本输入框或数字输入框的前缀Stringundefined
suffix文本输入框或数字输入框的后缀,如果设置为 true,显示默认的三个点Boolean,Stringundefined
clicksuffix 单击后缀执行事件Function(data)参数是表单数据undefined
date日期输入框Booleanundefined
time时间输入框 date:true,time:trueBooleanundefined
dateOptions时间日期选择器特有的选项 通过一个方法返回一个对象Function(form){}
dicts选择框初始值。格式[{label:title,value:val}]Array[]
query选择框查询方法,执行 callBack 方法赋值给 dictsFunction(words,callBack)undefined
defaultEmpty默认设空值,否则默认为第一项true,false,undefinedundefined
area多行方本框Booleanundefined
radio单选框Array[]
checkbox多选框Array[]
labels单选框和多选框有效,显示单选框和多选框字段,和 values 数组长度等长Array[]
switch开关Booleanundefined
trueColor开关有效,选中时背景色String#13ce66
falseColor开关有效,未选中时背景色String#ff4949`
switchWidth开关有效,开关长度number---
autocomplete输入建议框Booleanundefined
fetch_suggestions建议框有效,callback([])返回建议数组Function(words,callback)undefined
auto_select建议框有效,处理数选中后操作Function(item,items)undefined
valueKey建议框有效,输入建议对象中用于显示的键名stringvalue
popperClassAutocomplete 下拉列表的类名string-----
triggerOnFocus是否在输入框 focus 时显示建议列表Booleantrue,false
popperAppendToBody是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 falseBooleantrue,false
bj标记项,可以设置分割线,ui 其他标记Booleanundefined
upload文件上传,参数详见 element-ui-upload 文档trueundefined
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表格固定高度stringpx % vh calcundefined
btnsWidth表格行操作按钮宽度Number---185
sort排序对象{key:参数名,value:排序方式(字段名 asc,desc)}Objectundefined ------
page_align分页条显示方式Functionleft ,center, rightcenter
disFuncs过滤表格功能[操作,编辑,删除,查看,分页,表头,查询,更多]Array[control,edit, del,read,page,setting,query,core]undefined
suffix表名后缀,一个页面多个表格时需要增加String------
btnType设置表格操作列按钮类型 例如 {add:{type:'info'},edit:{type:'danger'}}Objectprimary / success / warning / danger / info / text['text']
row_Drop行拖拽Booleantrue,falsefalse
queryInfo表格检索对象数组,项属性见后面检索项文档Array--- ------
queryH是否横向生成检索框组,否则纵向生成检索框组Number---200
leftWidth左侧查询宽度 竖形查询时有效Booleantrue,false ------
queryLabel是否显示查询 labelBooleantrue,false ---true
queryLabelWidth查询 label 宽度Function---0
queryInputWidth查询输入框宽度Function---0
justify查询标题分散对齐Functionundefined ------
popoverWidth查询弹窗宽度String150px---
popoverOffset查询弹窗偏移量Number------
sumData合计 格式:{key:val}Object---undefined
rowStyle行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。FunctionFunction({row, rowIndex})/Object---
rowClassName行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。FunctionFunction({row, rowIndex})/String---
cellStyle单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。FunctionFunction({row, column, rowIndex, columnIndex})/Object---
cellClassName单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。FunctionFunction({row, column, rowIndex, columnIndex})/String---
pagesizeListpagesize listArray[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是否横向显示查询按钮和操作按钮Booleantrue,falsefalse
表格 column 属性
参数说明类型可选值默认值
key表单项绑定值 key (tableAttrs.key值),后面所有项是value值 如:tableAttrs:{key:'key1',{title:'t1',val:'v1'}}String---
title对应列显示的标题String------
val对应列值any------
typeselection 显示多选框;index 显示该行的索引;expand 显示为一个可展开的按钮Stringselection/index/expand---
col_width列宽度String---100px
align列显示方式Stringleft ,center, rightcenter
sortable列排序Booleantrue,false,undefinedundefined
tooltip当内容过长被隐藏时显示Booleantrue,false,undefinedundefined
fixed列是否固定在左侧或者右侧,true 表示固定在左侧string, booleantrue, left, right---
visible设置为 false 则此项不显示在表格中booleantrue,false,undefinedundefined
labelWidth表格项标题宽度Numberundefined
headerAlign表头对齐方式,若不设置该项,则使用表格的对齐方式Number----
format时间格式化stringdayjs 格式
prefix前缀string---------
suffix后缀string---------
decimals小数位数Numbernumber0
paddecimals时,是否用0填充小数位数Booleantrue,falsetrue
style样式 style(value,row,index)function------
html自定义 html(value,row,index)function------
alwaysShow表格设置时永远显示Booleantrue,false---
editTable编辑模式Booleantrue,false---
clearable编辑模式下可清空输入Booleantrue,false---
表格 检索项 属性
参数说明类型可选值默认值
key检索 key,传入后台的参数名称String 或 Array------
val检索值,传入后台的参数值String 或 Array------
remark标识检索项名称String------
labellabel 文本String------
labelWidthlabel 文本长度Number---100
inVisible不显示,只传参数Booleantrue,falseundefend
more生成更多查询,要在表格属性disFuncs中开启morebooleantrue,false---
date生成时间检索框Booleantrue,false,undefined---
daterange生成时间段检索框 [key1,key2] [val1,val2]Booleantrue,false,undefined---
dicts生成选择检索框初始对象数组Array------
query选择检索框的数据源functionwords,callback---
daterange生成时间段检索框 key 为数组,val 为数组[key1,key2],[val1,val2]String------
autocomplete生成建议检索框Booleantrue,false,undefined---
valueKey建议框有效,输入建议对象中用于显示的键名stringvalue
fetch_suggestions获取建议检索框数据源Functionwords,callback---
auto_select建议检索框项选中处理事件Functionitem,itmes---
popperClassAutocomplete 下拉列表的类名string---------
triggerOnFocus是否在输入框 focus 时显示建议列表Booleantrue,falsetrue
popperAppendToBody是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 falseBooleantrue,falsetrue
customize生成自定义元素,重写自定义检索项 query-item.key-customizeBooleantrue,falsetrue
表格检索项重写 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

Keywords

FAQs

Last updated on 01 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc