SurelyVue基本使用以及去水印

npm i @surely-vue/table --save

或者
yarn add @surely-vue/table

import '@surely-vue/table/dist/index.less';

import { createApp } from 'vue';
import STable from '@surely-vue/table';
// eslint-disable-next-line import/no-unresolved
import App from './App.vue';

const app = createApp(App);
app.use(STable);

然后选择一个模板

用这个

<template>
  <s-table
    :columns="columns"
    :scroll="{ y: 400 }"
    :pagination="false"
    :data-source="dataSource"
  ></s-table>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}

export default defineComponent({
  setup() {
    const columns = [
      {
        title: 'Full Name',
        dataIndex: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Column 1',
        dataIndex: 'address',
      },
      {
        title: 'Column 2',
        dataIndex: 'address',
      },
      {
        title: 'Column 3',
        dataIndex: 'address',
      },
      {
        title: 'Column 4',
        dataIndex: 'address',
      },
      { title: 'Column 5', dataIndex: 'address' },
    ];
    const data: DataItem[] = [];
    for (let i = 0; i < 1000; i++) {
      data.push({
        key: i,
        name: `Edrward ${i}`,
        age: i + 1,
        address: `London Park no. ${i}`,
      });
    }
    return {
      dataSource: ref(data),
      columns: ref(columns),
    };
  },
});
</script>

import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import { createRequire } from 'module';





Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),




css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import 'ant-design-vue/dist/reset.css';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import '@surely-vue/table/dist/index.less';
import STable from '@surely-vue/table';
// eslint-disable-next-line import/no-unresolved

const app = createApp(App);
app.use(STable);

app.use(Antd)
app.use(createPinia())
app.use(router)

app.mount('#app')

下面是去水印

:deep(.surely-table) {
  font-size: 16px;

  // Unlicensed Product   带有滚动条的table
  .surely-table-horizontal-scroll+div {
    visibility: hidden !important;
  }

  .surely-table-unselectable {

    // Powered by Surely Vue
    .surely-table-body-viewport-container+div {
      // 使用CSS的clip属性来隐藏元素。这样可以根据元素的尺寸和位置来裁剪显示区域，将其设为与元素相同大小的矩形，即可隐藏该元素。
      clip: rect(0, 0, 0, 0);
    }

    // Unlicensed Product   不带带有滚动条的table
    +div {
      visibility: hidden !important;
    }
  }
}

结束了哈

摘抄：Surely Vue Table表格css、js方法去除水印_surely vue 去除水印-CSDN博客

Surely Vue Table表格css、js方法去除水印_surely vue 去除水印-CSDN博客