tf-low-code-vue3-vite

版本内容

使用 element-plus 1.3.0-beta.1 以上版本

使用 vue3.2.23 以上版本

使用 vite2.7.0 以上版本 node 版本 14 以上

使用方法

安装

npm install tf-low-code-vue3-vite -S

快速运行

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import LForm from "tf-low-code-vue3-vite";
import LTable from "tf-low-code-vue3-vite";

const app = createApp(App);

app.use(ElementPlus).use(LForm).use(LTable).mount("#app");

表格使用

<template>
  <!-- <LForm :form="form" :options="options" :formItems="formItems" /> -->
  <LTable
    ref="tableRef"
    :data="listData"
    :columns="columns"
    :operates="operates"
    :options="options"
    @handleSelectionChange="handleSelectionChange"
    @confirmEdit="confirmEdit"
    @sizeChange="sizeChange"
    @currentChange="currentChange"
    @prevClick="prevClick"
    @nextClick="nextClick"
  >
    <template v-slot:culumnsheader>
      <div>这是自定义叫culumnsheader的表头</div>
    </template>
    <template v-slot:culumnRender>
      <div>这是自定义叫culumnRender的列</div>
    </template>
    <template v-slot:emptySlot>
      <div>这是在options中配置的空内容，在没数据的时候显示</div>
    </template>
    <template v-slot:expendRowRender="record">
      <el-form label-position="left" class="demo-table-expand">
        <el-form-item label="名称">
          <span>{{ record.row.name }}</span>
        </el-form-item>
        <el-form-item label="日期">
          <span>{{ record.row.date }}</span>
        </el-form-item>
        <el-form-item label="地址">
          <span>{{ record.row.address }}</span>
        </el-form-item>
      </el-form>
    </template>
  </LTable>
</template>
<script setup>
import { reactive } from "vue";
const operates = reactive({
  width: "auto",
  type: "text",
  plain: false,
  fixed: false,
  label: "操作区",
  list: [
    {
      show: true,
      inlineEdit: false, //是否行内编辑
      label: "编辑", //按钮名称
      type: "primary", //按钮状态
      disabled: false, //是否可编辑
      plain: false, //是否朴素按钮
      method(key, value) {
        console.log(key);
        console.log(value);
      },
    },
  ],
});
const options = reactive({
  stripe: false, // 是否为斑马纹 table
  loading: false, // 是否添加表格loading加载动画
  highlightCurrentRow: false, // 是否支持当前行高亮显示
  mutiSelect: false, // 是否支持列表项选中功能
  border: false, // 是否显示表格竖线
  expendRowRender: true, // 是否展开行
  maxHeight: 500, //最大高度
  emptySlot: "emptySlot", //空状态时的插槽
  pagination: {
    align: "center", //配置分页对齐方式
    //表格分页配置
    layout: "prev, pager, next",
    title: 50,
    background: true,
    small: false,
    pageSize: 10,
    pageCount: 10,
    //currentPage: 1,
    pageSizes: [10, 20, 30, 40],
    disabled: false,
    sizeChange(e) {
      //分页页码大小变动时候触发的事件
      console.log(e);
    },
    currentChange(e) {
      //分页当前页变动时候触发的事件
      console.log(e);
    },
    prevClick(e) {
      //分页中用户点击上一页按钮改变当前页后触发
      console.log(e);
    },
    nextClick(e) {
      //分页中用户点击下一页按钮改变当前页后触发
      console.log(e);
    },
  },
});
const columns = reactive([
  {
    prop: "date",
    label: "日期",
    datePicker: true,
    show: true, //是否展示
    align: "center", //对齐方式，默认center
    width: "300px", //宽度
    sortable: false, //是否可排序，默认false
    //filters数据过滤的选项
    //filter-method(){}数据过滤使用的方法
    /* render: function (value, value2) {
      //重新自定义表格内的数据属性
      value2.row.date = "1";
      return;
    }, */
    /* scopedSlots: {
      customHeader: "culumnsheader", //自定义表头的插槽名
      customRender: "culumnRender", //自定义列的插槽名优先级高于render
    }, */
  },
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "address",
    label: "地址",
    selectData: {
      value: "value",
      label: "label",
      list: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
      ],
    },
  },
]);
const listData = reactive([
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1516 弄",
    // table_edit: true,
  },
]);
//多行选中
const handleSelectionChange = (val) => {
  console.log(val);
};
const sizeChange = (val) => {
  //分页页码大小变动时候触发的事件
  console.log(val);
};
const currentChange = (val) => {
  //分页当前页变动时候触发的事件
  console.log(val);
};
const prevClick = (val) => {
  //分页中用户点击上一页按钮改变当前页后触发
  console.log(val);
};
const nextClick = (val) => {
  //分页中用户点击下一页按钮改变当前页后触发
  console.log(val);
};
const confirmEdit = (val) => {
  //保存编辑的回调 val.row为保存的当前数据
  console.log(val.row);
};
</script>

表单使用

<template>
    <LForm :form="form" :formItems="formItems" :options="options2">
    <template v-slot:slotF>
      <div>这是自定义插槽</div>
    </template>
    <!-- <template v-slot:footButton>
      <el-button>创建</el-button>
    </template> -->
  </LForm>
</template>
<script setup>
import { reactive } from "vue";
const formItems = reactive([
  {
    label: "活动名称",
    prop: "name",
    placeholder: "请输入活动名称",
  },
  {
    label: "活动区域",
    prop: "region",
    type: "select",
    placeholder: "请输入活动区域",
    data: [
      {
        label: "区域一",
        value: "shanghai",
      },
      {
        label: "区域二",
        value: "beijing",
      },
    ], //select的时候需要输入data
  },
  {
    label: "即时配送",
    prop: "delivery",
    type: "switch",
  },
  {
    label: "活动性质",
    prop: "type",
    type: "checkboxGroup",
    data: [
      {
        label: "hahhaha",
        type: "type",
      },
      {
        label: "1122212",
        type: "type",
      },
    ], //checkboxGroup的时候需要输入data
  },
  {
    label: "特殊资源",
    prop: "resource",
    type: "radioGroup",
    data: [
      {
        label: "lx",
      },
      {
        label: "lx2",
      },
    ], //radioGroup的时候需要输入data
  },
  {
    label: "活动形式",
    prop: "desc",
    type: "textarea",
  },
]);
const options2 = reactive({
  //和element-ui上的属性基本保持一致
  inline: false,
  labelPosition: "right",
  labelWidth: "80px",
  labelSuffix: ":",
  hideRequiredAsterisk: false,
  showMessage: true,
  inlineMessage: false,
  statusIcon: false,
  validateOnRuleChange: true,
  size: "small",
  disabled: false,
  // button: "footButton", //自定义按钮名
  emptySlot: "slotF", //自定义插槽名
  emptySlotShow: false, //是否只显示自定义插槽
  method(value) {
    //默认立即创建按钮的回调
    console.log(value);
  },
});
const form = reactive({
  name: "",
  region: "",
  delivery: false,
  type: ["lx"],
  resource: "lx",
  desc: "",
});
</script>