Futuret-ui

Futuret-ui

一个基于 vue 的 PC 端 ui 组件库 未来化，不常规的 Vue3UI 组件(包括但不限于表格、表单、弹窗、按钮等等)

功能点

• 特色表格
• 弹窗
• 多样按钮
• 表单
• ...

浏览器支持

| | | | | | | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | 80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |

安装

版本：vue 3.x

npm install futuret-ui -d

NPM

只使用表格

表格超过 50 行就会触发虚拟化表格支持十万行渲染

// ...
import futuretui from "futuret-ui";
import "futuret-ui/es/style.css";
// ...

createApp(App).use(futuretui).mount("#app");

示例

<template>
  <div>
    <future-tableTroor ref="xToolbar">
      <template v-slot:buttons>
        <button>提示(10000条数据)</button>
      </template>
      <template v-slot:tools>
        <button>提示(10000条数据)</button>
      </template>
    </future-tableTroor>
    <future-table
      ref="xTable1"
      :data="data"
      :options="options"
      :rowCofig="{
      highlight: false
    }"
      ids="id"
      height="70vh"
    >
      <template v-slot:caozuo>
        <button>编辑</button>
        <button>添加</button>
      </template>
    </future-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick, onMounted, provide } from "vue";
  const xTable1: Ref<any | null | undefined> = ref();
  const xToolbar: Ref<any | null | undefined> = ref();
  nextTick(() => {
    setTimeout(() => {
      // 将表格和工具栏进行关联
      const $table = xTable1.value;
      const $toolbar = xToolbar.value;
      $table.connect($toolbar);
    }, 0);
  });
  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
  onMounted(() => {
    for (let index = 0; index < 10000; index++) {
      data.value.push({
        id: index,
        names: "张三",
        age: 18,
        sex: "女",
        address: "中国第一龙江市",
      });
    }
  });
</script>

FutureTable 配置项

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | --------- | :----------------------------------------------- | ----------------- | ------------- | ---------- | | data | 显示的数据 | Array | [ ] | [ ] | | options | 列配置 | 对象 OptionObject | OptionObject | 配置看下面 | | rowCofig | 表格配置 | 对象 | - | - | | ids | 表格配置 highlight 为 true 的时候，选中的 key 值 | string | - | - | | height | 表格高度 | string | px/vw/vh/em/% | - | | minheight | 表格最小高度 | string | px/vw/vh/em/% | - | | maxheight | 表格最大高度 | string | px/vw/vh/em/% | - |

FutureTable OptionObject 配置项

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------ | :--------- | ----- | ------ | ------ | | column | 展示列数据 | array | column | [ ] |

column

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ----- | :----------------- | ------ | ------------- | ------ | | prop | 对应列内容的字段名 | string | - | - | | title | 显示的标题 | string | - | - | | width | 列宽 | string | px/vw/vh/em/% | - | | style | 表头和表格的样式 | string | - | - |

rowCofig

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | --------- | :-------------------------------------- | ------ | ------ | ------ | | highlight | 选中列的时候有高亮 | boolen | - | false | | isChecked | 多选框可通过 ref 获取里面的 checkstr 值 | bool | - | false |

isChecked 用法

<future-table
  ref="xTable1"
  :data="data"
  :options="options"
  :rowCofig="{
      isChecked: true
    }"
  ids="id"
  height="70vh"
>
  <template v-slot:caozuo>
    <button>编辑</button>
    <button>添加</button>
  </template>
</future-table>
<script lang="ts" setup>
  import { ref, nextTick, onMounted } from "vue";
  const xTable1: Ref<any | null | undefined> = ref();

  nextTick(() => {
    //选中多选框之后的值
    console.log(xTable1.value.checkstr); //值为['15']
  });
  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
</script>

FutureTable Event 事件

| 属性 | 说明 | 参数 | | ------------- | :------------------------------------------- | ------- | | handchangeAll | highlight 为 true 的时候的用户触发的点击事件 | options |

FutureTable slot 表格 如果需要对表头进行插入则加上_title

我们针对表格的操作列和姓名列进行插入按钮

<future-table
  :data="data"
  :options="options"
  :rowCofig="{
      isChecked: true
    }"
  ids="id"
  height="70vh"
>
  <template v-slot:caozuo>
    <button>编辑</button>
    <button>添加</button>
  </template>
  <!--rows是这一列的数据，indexs是索引  -->
  <template v-slot:names="{rows,indexs}"> {{rows.name}} </template>
  <!--这是对应name那一列的表头进行插槽  -->
  <template v-slot:names_title="{rows}"> {{rows.title}} </template>
</future-table>
<script lang="ts" setup>
  import { ref, nextTick, onMounted } from "vue";

  const options: any = {
    column: [
      {
        prop: "id",
        title: "Id",
      },
      {
        prop: "names",
        title: "姓名",
      },
      {
        prop: "age",
        title: "年龄",
      },
      {
        prop: "sex",
        title: "性别",
      },
      {
        prop: "address",
        title: "地址",
      },
      {
        prop: "caozuo",
        title: "操作",
      },
    ],
  };
  const data = ref<any>([
    {
      id: "15",
      names: "张三",
      age: 18,
      sex: "女",
      address: "中国第一龙江市",
    },
  ]);
</script>

...后续的功能在补充,现在可以单纯的当个表格组件使用