动态表格+表单组件

安装

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);

---

示例

<template>
  <div>
    <div
      style="
        padding: 5px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      "
    >
      <el-button @click="add" type="primary">增加表单</el-button>
      <el-button @click="test" type="success">测试表单</el-button>
    </div>
    <!--增加form表单-->
    <g-add-form
      :is="isshow"
      :fullscreen="false"
      :formAttrs="currdata"
      :formInfo="formInfo"
      :showFooter="true"
      @saveData="saveData"
      @close="isshow = undefined"
      commitText="save"
      cancelText="exit"
      :showCommitBtn="showCommitBtn"
      :showCancelBtn="true"
      :labelWidth="120"
    >
      <!-- <div slot="add-title"></div> -->
      <!-- <div slot="add-footer"></div> -->
      <div slot="arrgoodstags" slot-scope="scope">
        <el-input
          :style="`margin-right:1px;width: ${
            (200 - 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>
    </g-add-form>
    <!--列表显示数据-->
    <g-table
      :tableAttrs="tdata"
      height="calc(100vh - 100px)"
      @load="load"
      @edit="edit"
      @del="del"
      @read="read"
      page_align="flex-end"
      :btns_width="380"
    >
      <!-- :func="['edit', 'del', 'read', 'page', 'control']" -->
      <div slot="imgurl">444</div>
      <!-- <el-button type="danger" slot="del" @click="del">delete</el-button> -->
      <div slot="lbtn">
        <el-button type="warning" style="margin-right: 2px">fail</el-button>
      </div>
      <div slot="rbtn">
        <el-button type="info">ok</el-button>
      </div>
    </g-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      currdata: [],
      showCommitBtn: true,
      formInfo: undefined,
      isshow: undefined,
      formAttrs: [
        {
          key: "name",
          title: "姓名",
          val: "刘二麻子",
          required: true,
          width: 210,
          validate: (rule, value, callback) => {
            if (value === "fail") {
              callback(new Error("测试错误！"));
            } else {
              callback();
            }
          },
        },
        { key: "age", title: "年龄", val: "18", number: true, width: 210 },
        { key: "company", title: "公司", val: "", max: 10, width: 210 },
        {
          key: "sex",
          title: "性别",
          val: "0",
          dicts: [
            { label: "男", value: "1" },
            { label: "女", value: "0" },
          ],
          query: (words, callback) => {
            callback(
              [
                { label: "男", value: "1" },
                { label: "女", value: "0" },
              ].filter((li) => li.label == words)
            );
          },
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "date",
          title: "日期",
          val: "",
          date: true,
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "time",
          title: "时间",
          val: "",
          time: true,
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "leval",
          title: "等级",
          val: 3,
          radio: [1, 2, 3],
          labels: ["大", "中", "小"],
          change: (data) => {
            console.log(data);
          },
        },
        {
          key: "hobby",
          title: "爱好",
          val: [10],
          checkbox: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          labels: [
            "乒乓球",
            "跑步",
            "吃鱼",
            "打球",
            "开车",
            "看书",
            "打游戏",
            "上网",
            "cosplay",
            "movie",
          ],
          width: 650,
          change: (data) => {
            console.log(data);
          },
        },
        { key: "remark", title: "备注", val: "", area: true, width: 650 },
        {
          key: "email",
          title: "邮箱",
          val: "myemail@qq.com",
          email: true,
          required: true,
          width: 650,
        },
        {
          key: "switch",
          title: "开关",
          switch: true,
          val: false,
          trueColor: "yellow",
          falseColor: "blue",
          switchWidth: 100,
          change: (data) => {
            console.log(data);
          },
        },
      ],
      tdata: [
        {
          key: "goodstags",
          title: "goodstags",
          val: "",
          col_width: 150,
          suffix: true, // "el-icon-edit",
          prefix: "$",
          password: false,
          click: (data) => {
            alert("hello world!");
          },
        },
        {
          key: "amount",
          title: "amount",
          val: 0,
          number: true,
          prefix: "￥",
          suffix: "<B style='color:red;'>元</B>",
          click: (data) => {
            //todo()
          },
          change: (data) => {
            console.log(data);
          },
        },
        { key: "wareid", title: "wareid", val: 0, number: true },
        {
          key: "arrgoodstags",
          title: "arrgoodstags",
          val: ["", "", ""],
        },
        { key: "goodsid", title: "goodsid", val: 0, number: true },
        {
          key: "retailsale",
          title: "retailsale",
          val: 0,
          number: true,
          col_width: 120,
        },
        { key: "fl1", title: "fl1", val: 1 },
        {
          key: "goodsname",
          title: "goodsname",
          val: "",
          tooltip: true,
          col_width: 200,
        },

        { key: "fl2", title: "fl2", val: 0 },
        { key: "imgurl", title: "imgurl", val: "mall/00ef4g", tooltip: true },
        { key: "sale", title: "sale", val: 865.0, number: true },
        {
          key: "amountxs",
          title: "amountxs",
          val: 0.0,
          number: true,
          col_width: 120,
        },
        { key: "statetag", title: "statetag", val: 1, tooltip: true },
        { key: "jbstr", title: "jbstr", val: "" },
        {
          key: "remark",
          title: "remark",
          val: "Thermo King 。",
          tooltip: true,
          area: true,
          width: 650,
        },
      ],
    };
  },
  methods: {
    //测试表单
    test() {
      this.currdata = this.formAttrs;
      this.formInfo = undefined;
      this.isshow = "g-add-form";
    },
    //初始数据
    async load(a, b) {
      let url = "http://api.lengyun.co:18070/erp/mallvisitor/goodslist.do";
      let data = await axios.post(url, {
        page: a.page,
        pagesize: a.pagesize,
        fieldlist: "*",
        fl1: 2,
        orderlist: "orderid asc",
      });
      b(data.data.data.list, data.data.data.total);
    },
    //增加
    add() {
      this.currdata = this.tdata;
      this.showCommitBtn = true;
      this.formInfo = undefined;
      this.isshow = "g-add-form";
    },
    //删除
    del(data, callback) {
      alert("ok");
      callback(true);
      //callback("删除失败了");
    },
    //编辑
    edit(data) {
      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) {
      console.log(data);
      this.isshow = undefined;
    },
  },
};
</script>

---

项目地址

点击跳转至 GITHUB (opens new window)

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