wzx-kit-1 v0.0.50

jarvis-web-kit

安装依赖

yarn add jarvis-web-kit --registry http://192.168.8.88:4873

全局引用

// ....省略

import JarvisUI from "jarvis-web-kit";
import "jarvis-web-kit/dist/packages/css/style.css";

const app = createApp(App);
app
  .use(JarvisUI)
  .use(store)
  .use(router)
  .mount("#app");

示例

<template>
  <div class="home">
    <list-page :columns="columns" :data="data" :options="options"></list-page>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "HomeView",
  setup() {
    const options = {
      showToolbar: true,
    };
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
      },
      {
        title: "Salary",
        dataIndex: "salary",
      },
      {
        title: "Address",
        dataIndex: "address",
      },
      {
        title: "Email",
        dataIndex: "email",
      },
    ];
    const data = [
      {
        key: "1",
        name: "Jane Doe",
        salary: 23000,
        address: "32 Park Road, London",
        email: "jane.doe@example.com",
      },
      {
        key: "2",
        name: "Alisa Ross",
        salary: 25000,
        address: "35 Park Road, London",
        email: "alisa.ross@example.com",
      },
      {
        key: "3",
        name: "Kevin Sandra",
        salary: 22000,
        address: "31 Park Road, London",
        email: "kevin.sandra@example.com",
      },
      {
        key: "4",
        name: "Ed Hellen",
        salary: 17000,
        address: "42 Park Road, London",
        email: "ed.hellen@example.com",
      },
      {
        key: "5",
        name: "William Smith",
        salary: 27000,
        address: "62 Park Road, London",
        email: "william.smith@example.com",
      },
    ];
    return {
      columns,
      data,
      options,
    };
  },
});
</script>