@yanniswy/cms_vue NPM

安装

V0.0.17

npm i @yanniswy/cms_vue
import cms from '@yanniswy/cms_vue';
Vue.use(cms)

Git

:point_right: Gitee

node版本 v18.12.1

BaseTable

npm.io

BaseTable组件属性

需要引入 Table TableColumn

:tableData=Array[Object] 表格数据
:tableColumnOptions=Array[Object] 表格列配置数据, 此项必填
- label=String : 列名
- prop=String : 与表格数据相应字段名一致
- width=Number : 列宽, 可不填
- tooltip=Boolean : 该列是否添加 show-overflow-tooltip 属性,(只显示一行, 溢出省略,hover显示Tooltpi)
- slot=String : 开启插槽, 值为插槽名
```
//使用:
<template slot="img" slot-scope="scope">
  <div class="img w100 h100 fx-center fx-col-center">
    <el-image fit="cover" :src="scope.row.img"></el-image>
  </div>
</template>
```
:table_cell_height=Number 表格内容行高, 默认80px
:header_cell_height=Number 表头行高, 默认50px

:body_cell_style=Object 表格样式

:body_cell_style="{
  backgroundColor: '#fff',
  color: '#999',
  fontSize: '12px',
}"

:header_cell_style=Object 表头样式

:header_cell_style="{
  backgroundColor: '#fff',
  color: '#999',
  fontSize: '12px',
}"

:rowspanArray=Array[String] 需要纵向合并相邻相同的表格的列名数组. 可不填
```
:rowspanArray="['id']"
```
rowGap=Boolean : 是否开启行间距,20px,不可调

勾选框

需要引入 Checkbox

selection=Boolean 是否显示勾选框
:multipleSelection.sync=Array 被选中的数据,若开启selection,此项必填

分页器

需要引入 Pagination

fy Boolean
- 是否显示分页器

:fyData=Object 分页数据, 不传值则不显示分页器

// 页面初次加载表格数据时初始化分页数据
this.getData({size: 10, page: 1}).then(res => {
  console.log(res)
  this.tableData=res.data
  this.fyData = {
    page: res.page,  // 当前页面
    size: res.size,  // 每页数量
    total: res.total // 数据总量
  }
})

@checkPage=Callback 分页器选择页码的回调函数,参数为更新后的 fyData

checkPage(v) {
  this.getData({size: v.size, page: v.page}).then(res => {
    this.tableData = res.data
  })
},

:pageSize=Array 每页显示条目数量的数组,默认 [10, 15, 20, 25, 30]

加载更多

:loadMore=Boolean 是否开启加载更多,默认 false

@loadMore=Callback 加载更多的回调, 进行数据请求, 参数 fyData

loadMore(v) {
  this.getData({size: v.size, page: v.page}).then(res => {
    this.tableData.push(...res.data)
  })
},

点击事件

@cellClick="click"
触发当前组件的 click 事件

usage

<base-table
   @cellClick="click"
>
</base-table>

methods: {
  click(e) {
    console.log(e);
  },
}

回调参数:点击行的所有数据

usage

<template>
  <div class="AllTable w100 h100 pd-20" v-if="tableData">
    <div class="title pd-bottom-10 fw-600 f20">所有商品:</div>
    <base-table
      :tableData="tableData"
      :tableColumnOptions="tableColumnOptions"
      :table_cell_height="40"
      :header_cell_height="45"
      :body_cell_style="{
        backgroundColor: 'transparent',
        color: '#3cc5e4',
        fontSize: '16px',
      }"
      :header_cell_style="{
        backgroundColor: 'transparent',
        color: '#3cc5e4',
        fontSize: '18px',
        fontWeight: 600,
      }"
      :fyData="fyData"
      :pageSize="[10]"
      :fy="true"
      @checkPage="checkPage"
      loadMore
      @loadMore="loadMore"
      @cellClick="click"
    >
      <!-- <template slot-scope="scope" slot="img">
        <div class="demo-image__preview h100">
          <el-image
            fit="cover"
            class="h100"
            :src="scope.row.goodsImgUrl"
            :preview-src-list="[scope.row.goodsImgUrl]"
          ></el-image>
        </div>
      </template> -->
    </base-table>
  </div>
</template>
<script>
import { getJDInfo } from "@/api/MachineLearning/bigScreen";
export default {
  data() {
    return {
      tableData: null, // 表格数据
      tableColumnOptions: [
        // 表格列配置数据
        {
          label: "商品标题",
          prop: "title",
          tooltip: true,
        },
        {
          label: "商品类型",
          prop: "type",
          width: 120,
        },
        {
          label: "商品价格",
          prop: "price",
          width: 120,
        },
      ],
      fyData: {},
    };
  },
  mounted() {
    getJDInfo({ size: 10, page: 1 }).then((res) => {
      this.tableData = res.data.data;
      console.log(res);
      this.fyData = {
        page: res.data.page, // 当前页面
        size: res.data.size, // 每页数量
        total: res.data.totalSize, // 数据总量
      };
    });
  },
  methods: {
    // 点击时,事件车发送消息,更新词云
    click(e) {
      this.eventBus.$emit("commodity_id", e.id);
    },
    loadMore(v) {
      getJDInfo({ size: v.size, page: v.page }).then((res) => {
        this.tableData.push(...res.data.data);
      });
    },
    checkPage(v) {
      getJDInfo({ size: v.size, page: v.page }).then((res) => {
        this.tableData = res.data.data;
        this.fyData = {
          page: res.data.page, // 当前页面
          size: res.data.size, // 每页数量
          total: res.data.totalSize, // 数据总量
        };
      });
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  color: var(--col-main);
}
</style>

其它问题

当 loadmore 图标旋转动画不自动停止时, 可以用 ref 手动更改组件的 loading 属性为 false
所有列宽累加不能超过组件整体宽度, 不然布局会乱.

VirtualScroller

属性

<div v-if="data">         // 这里最好做个判断, 避免因为数据还没拿到,初始化组件报错
  <virtual-scroller
    title="标题"           // 组件标题
    titleColor="#00fff7"  // 标题颜色,默认#00fff7
    :data="data"          // 表格数据 [{value,id},{value,id}...]
    :interval="60"        // 滑动时间,(每 interval/itemHeight 时长滑动 1px)
    :itemHeight="60"      // 每行的高度, 单位(px)
    color="#000"          // 文本颜色
    :fontWeight="600"     // 文本字重
    fontSize="20px"       // 文本大小
    @click="click"        // 点击事件, 返回数据 id
    :radius="20"          // 容器 border-radius
    showScroll            // 是否显示滚动条
  ></virtual-scroller>
</div>
<style lang="less" scoped>
:deep(.virtual-scroller) {       // 设置 背景色
  .odd {
    background-color: rgba(255, 0, 0, 0.3);
  }
  .even {
    background-color: rgba(0, 0, 255, 0.3);
  }
}
</style>

LightBorder

属性

<light-border :reverse="false" time="4s" :width="10">
  <div class="context"></div>
</light-border>

reverse Boolean
- 是否逆时针旋转, 默认 false
time String
- 单次动画时长,默认 3s
width Number
- 光效边框宽度, 默认 4 (px)

core-js default-passive-events element-ui vue vue-router vuex

@infinitebrahmanuniverse/nolb-_yan @everything-registry/sub-chunk-1037 @zalastax/nolb-_yan

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago