Giter Club home page Giter Club logo

pl-table's Introduction

pl-table 不在更新维护, 你可以使用umy-ui,这里面包含了pl-table的所有功能。只是把pl-table移动到umy-ui库里面去了,umy-ui它一样解决表格卡的情况!请点击下面链接

umy-ui官网

umy-ui代码库,如何您是pl-table的使用者,感谢您点击这个,去点个Star吧

(更多问题请加入pl-table交流群吧)感谢点击上方的Star!!!

QQ交流1群: 675286117已满员

QQ交流2群: 893342082 新群

友情链接

vue-admin-beautiful —— 在线演示

安装方式 and 引入方式

** npm方式安装 **

  // npm i pl-table

  // npm引入方式 如下
  // main.js
  import plTable from 'pl-table'

  import 'pl-table/themes/index.css' // 引入样式(必须引入),vuecli3.0不需要配置,cli2.0请查看webpack是否配置了url-loader对woff,ttf文件的引用,不配置会报错哦

  import 'pl-table/themes/plTableStyle.css' // 默认表格样式很丑 引入这个样式就可以好看啦(如果你不喜欢这个样式,就不要引入,不引入就跟ele表格样式一样)

  Vue.use(plTable);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

  // 注意:如果你不想在入口文件注入, 而是想在单个某个文件页面引入,你可以这样写哦
  import { PlTable, PlTableColumn, PlxTableGrid, PlxTableColumn } from 'pl-table';
  export default {
    components: {
      PlTable,
      PlTableColumn
    },
  }

** CDN方式 **

  <!--引入表格样式-->
  <link rel="stylesheet" href="https://unpkg.com/pl-table/themes/index.css">

  <!--默认表格样式很丑 引入这个样式就可以好看啦-->
  <link rel="stylesheet" href="https://unpkg.com/pl-table/themes/plTableStyle.css">

  <!-- import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/pl-table/lib/index.js"></script>
  // 真实项目不建议你直接引入  <script src="https://unpkg.com/pl-table/lib/index.js"></script>这样去引如会直接下最新版本,如果你的项目打包发     // 布了,然后遇见pl-table大更新 你可能项目会报错。
  // 推荐你这样引入: https://unpkg.com/[email protected]/lib/index.js   加入版本号!

用前须知(必读)

  1. pl-table不使用use-virtual属性,整个表格功能性的东西都是element表格,除了样式
  2. pl-table 开启use-virtual虚拟可以支持微小的合并行|列 如2列 2行,支持多级头
  3. plx-table-grid同时虚拟不支持合并行|列,不支持多级头,非必要不推荐使用X + Y同时虚拟
  4. pl-table开启use-virtual不支持展开行

pl-table表格的API

https://github.com/livelyPeng/pl-table/wiki/pl-table-api

plx-table-grid表格的API(对列没有刚需的,没必要用这个,用上面的pl-table就行, 列没有几百列不需要用这个)

https://github.com/livelyPeng/pl-table/wiki/plx-table-grid-APi

实例文件(基础用法)

https://github.com/livelyPeng/pl-table/blob/master/website-project/testFile/index.vue // npm方式实例

https://github.com/livelyPeng/pl-table/blob/master/website-project/testFile/cdn.html // cdn方式实例

更新日志

2.7.5

  1. 修改合计
  2. 新增属性
  3. 新增pl-table大数据树表格
  4. 重构代码
  5. 修改BUG

2.7.4

  1. 解决动态加载数据,当滚动条未在顶部时,加载的数据只显示3条
  2. 新增表格最大高度属性,max-height,你可以添加如此属性
  3. 优化表格
  4. 解决高度异步赋值,导致表格高度计算错误问题
  5. 解决缓存组件,不能记录之前滚动条的滚动距离
  6. 之前绑定表格数据是datas, 现在是data属性
  7. 添加分页组件
  8. 新增表格滚动底部方法
  9. 解决pagingScrollTopLeft方法的BUG

其他版本 . . .

当前版本BUG(等着下个版本修改)

暂未发现

pl-table's People

Contributors

parlay96 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pl-table's Issues

渲染el-autocomplete 依然卡顿,

  <template slot-scope="scope">                         <el-autocomplete                                 v-model="scope.row.code"                                 :fetch-suggestions="querySearch"                                 placeholder="请输入内容"                                 size="small"                                 style="width: 100%"                                 @select="handleSelect"                                 show-word-limit                         ></el-autocomplete>                     </template>

不支持el-autocomplete

点击行怎么让复选框勾选?

原来element-ui是用下面这段代码实现的,现在这样用只有行样式会变化,复选框不会勾选。
handleRowClick: function (row, event, column) { this.$refs.tableRows.toggleRowSelection(); }

请 支持普通模块式 外部引用

我们也想渲染大量数据,但 应用业务复杂,导致引用的库 打包后过大,现在已经改为完全外部化 通用库,所有必要的第三方库包括我们自己的都有支持 模块式引入方式,但你这个库不支持,报错了(见截图)。
image

我们需要类似 jquery 或如下方式的通用模块库:
image

请改造一下,多谢 :-)

datas 数据类型不合法时 chrome标签卡死

<pl-table :datas="events" 
                  use-virtual
                  :row-height="45"
                  :paginationShow="false">
</pl-table>
data(){
return {
events: {}
}}

当events声明为对象时,会造成浏览器标签页无响应, favicon一直在转,
卡死的标签cpu占用率维持在25%,消耗300MB内存

是有在轮询什么数据吗?
不应该先去执行typeof datas===array,
然后抛出数据异常错误吗?

如何设置表头背景色

headerRowClassName函数指定的class依然没有覆盖默认的element table 样式
需要通过/deep/来修改表头样式
主要是 background-color 与color样式

<pl-table   headerRowClassName="haha"></pl-table>
<style>
  .haha {
        background-color: rgb(0, 51, 102) !important;
        color: red;
        text-align: center
    }

</style>

color成功修改,但bg-color只修改了最右边的背景,子类的的没有没修改

<table><thead><tr class='haha'><th>

真正修改表头的背景颜色,需要

 /deep/ .plTableBox .el-table th {
        color: #fff;
        background-color: rgb(0, 51, 102);
    }

element有对应的表头属性可以设置
header-cell-style="{'background': 'rgb(0, 51, 102)', 'color': '#fff'}"

排序怎么使用啊?

就只看到一个 ”field-sort 显示字段是否排序 Boolean true”
还是默认打开的。
但是在表头就是显示不了排序的符号。

可能是缺少手动设置的排序方法,但是,这个方法我在field里写了sortMethod,也不行

有个重大的BUG,重复查询数据,前后行数不一致会导致数据丢失

场景:一个报表页面,可以根据不同查找条件返回数据.
问题:当前后查找数据行数不一致的时候,会有一定概率出现数据显示不全(缺失部分数据),底下合计却是正确的.常见问题是,前一个结果行数比较少,后一个查找结果比较多,但是table只显示了和前面一个结果一样多行数的数据,其余数据丢失,但是底下的合计却是正确的.

这个问题发生概率很高,早上专门测试了一下,10分钟内出现了2,3次,不知道是否和页面的宽度变化有关系,实在毫无头绪,望给予提示.
我这边数据加载是用AJAX异步加载的,结果直接赋给pltable的数据变量.

当存在动态创建的列,列的类名出现重复

<pl-table-column
                    width="90"
                    label="失效数"
                    prop="failNum"
                    sortable>
            </pl-table-column>
            <el-table-column
                    v-for="(val, key) in slotSave"
                    :key="'failNum' + key"
                    :prop="'failNum' + key"
                    :label="key + '失效数'"
                    sortable
                    width="120">
                <template slot-scope="scope">
                    xxx
                </template>
            </el-table-column>

当存在动态创建的列,列的类名会出现重复,从而导致数据更新的时候会出错,el-table不会出现该错误。
2019-11-29 15-35-59屏幕截图

2019-11-29 15-40-34屏幕截图

表格的选中行(current-row)会自动取消的问题

表格的选中行,总会因为各种操作就自动取消
比如:
1,页面高度发生改变;
2,页面有下拉框,一选中值;
3,各种弹出框
4,....
哪位大佬指点一下是否有类似的问题,element table没有这样子的问题.

样式污染比较严重

引入'pl-table/themes/index.css'后,会污染项目中表格的样式,甚至是表单的样式

在IE中兼容性问题

在IE下报 对象不支持“forEach”属性或方法"
image
参考浏览器兼容性
做了以下处理还是没有作用

{
        useBuiltIns: 'usage',
        polyfills: [
          'es6.promise',
          'es6.symbol',
          'es6.array.from',
          'es6.array.for-each'
        ]
      }

table slot显示不正常,slot=empty,append

API文档中有写到

空数据时显示的文本内容,也可以通过 slot="empty" 设置

https://github.com/livelyPeng/pl-table/wiki/Component-API-2.4.6%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC

  <template slot="empty">
                <icon class="el-icon-warning-outline"></icon>
                没有查询到符合条件的记录
</template>

但其实用slot的方式,没有正常显示

但是pl-table.js 8264行又有对这个empty slot的实现
_vm._t("empty")

当前版本 "pl-table": "^2.4.7",

fit 属性

无论设置了 还是没设置都不起作用

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.