happy-coding-clans / vue-easytable Goto Github PK

类似于

有没考虑移动端支持？ 试用了下，很赞!

有个需求就是某些列的值是根据其他值计算出来的，现在我改了数据，但是表格的显示不会自动刷新。我该如何解决？

想要一个树形表格。可以实现吗？

表格是隔行变色的, 鼠标悬停颜色变化! 但是当连续几条空数据时,鼠标悬停的效果如下:

vue-easytable官网就能看到具体的表格

正在修复

是否考虑支持左侧多级表头？一些复杂的报表这块用的比较多。

ERROR in ./~/.1.3.0@vue-easytable/libs/v-table/src/table.vue
Module parse failed: /Users/oak-016/localgit/beidou/frontv2/node_modules/.1.3.0@vue-easytable/libs/v-table/src/table.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
|

正在修复

原生table也会存在这个问题，正在修复

拖动列宽后，会造成样式错乱

表格中每一行数据有且仅有两种状态,(启用/禁用),在表头相应列能对数据进行筛选展示,如下图:

列配置 {field: 'test', title: 'test标题',width: 300, titleAlign: 'center',columnAlign:'center',componentName:'table-test',isEdit:false,isResize:true},

Vue.component('table-test',{
        template:`<div><el-select v-model="test" style="width: 280px" filterable  placeholder="请选择">
                        <el-option
                                v-for="item in testList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select></div>`,
        props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
        },
        data(){
           return {
               test:"",
               testList:[
                    { value: 1, label: '借记卡'},
                    { value: 2, label: '信用卡'},
               ],
           }
        }
    })  

发现问题，el-select是element组件，当数据改变时，el-select显示内容混乱，比如我删除一行，发现其中一行显示是删除行中的el-select

怎么可以html下引用啊

比如tableData里面某一个对象发生了变化后、可以调用某个方法在table里面把这个对象及时更新掉

哥们，把单元格或行编辑的也给做了呗。

调查了大部分vue、table相关的东西，但感觉都没有实现这个功能。
对于单元格内不是纯数据，而是想通过component或者template来渲染出比较复杂的东西，这种情况
如果能实现的话（类似slot之类的东西？），感觉会有一个明显的优势

个人建议：感觉目前实现的功能其实是大同小异的(element的table都满足)，并不解决目前任何痛点，我觉得楼主能实现rowSpan colSpan的话，会有更多人使用该组件
相关：ElemeFE/element#670

描述：npm方式安装的 vue-easytable
我引入 import 'vue-easytable/libs/themes-base/index.css' 后，报
error in ./~/vue-easytable/libs/themes-base/index.css

Module build failed: Unknown word (5:1)

3 | // load the styles
4 | var content = require("!!../../../css-loader/index.js?{"minimize":false,"sourceMap":false}!./index.css");

5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM
8 | var update = require("!../../../vue-style-loader/lib/addStylesClient.js")("0cd55501", content, false);

@ .//vue-easytable/libs/themes-base/index.css 4:14-141 13:2-17:4 14:20-147
@ .//babel-loader/lib!.//vux-loader/src/script-loader.js!.//vue-loader/lib/selector.js?type=script&index=0!./src/components/report/DailyReport.vue
@ ./src/components/report/DailyReport.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

watch这个组件好久了，最近有新需求刚好能使用一下，但是不是一个专业的前端，不能熟练的使用，不知道是否能提供类似一个JS插件的方式直接引用呢？谢谢。

可以使用了吗

目前没有太好的方案

现在已经提供的api是能够实现显示隐藏列,但是并没有一套现成的ui,希望能封装成一个拿来直接用的api

定义一个method，渲染表格数据的时候可以自动调用，从而依据返回结果控制该行是否显示。进一步可以通过该method加工数据，表格依据加工后的数据

这是怎么回事啊

大概看了一下，好像没有编辑表头的功能，如果有的话就好了

如题，不过，如果在列属性里能加上自动求和的属性配置就最好了。

These relative modules were not found:

• ../font/fontello.eot?58619503 in ./node_modules/css-loader?{"sourceMap":false}
  !./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-easyta
  ble/libs/themes-base/index.css
• ../font/fontello.svg?58619503 in ./node_modules/css-loader?{"sourceMap":false}
  !./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-easyta
  ble/libs/themes-base/index.css
• ../font/fontello.ttf?58619503 in ./node_modules/css-loader?{"sourceMap":false}
  !./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-easyta
  ble/libs/themes-base/index.css
• ../font/fontello.woff2?58619503 in ./node_modules/css-loader?{"sourceMap":fals
  e}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-easy
  table/libs/themes-base/index.css
• ../font/fontello.woff?58619503 in ./node_modules/css-loader?{"sourceMap":false
  }!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-easyt
  able/libs/themes-base/index.css
  就是报这些错误，找了很久没找到原因

我需要导入Excel，因此表格的结构不是固定的，想通过js-xlsx插件读取数据到vuex中，表格所在页面将tableData,columns,titleRows定义成计算字段，貌似表格不能更新，也可能是我不熟悉。

Hi!
Your table is awesome, but could you add an english documentation? ;-)

不单独单元格编辑 双击一行实现行内所有可编辑单元格处于编辑状态,
且单元格内容不一样,有文本框/数字框/日期选择框/下拉框等

你好，可否实现 级联对象显示 如： {field: 'aa.bb.cc',.....}

功能类似于 formatter: function (rowData,rowIndex,pagingIndex,field)
方便编辑日期、下拉等字段

{field: 'name', title:'姓名', width: 100}
栏位的宽度不应该是像数，后台给数据关注的是内容的宽度，比如某个栏位的适中宽度是60或是120，至于前端是用什么字体大小，后台不清楚，所以这个with用于定位为字符宽度更为合适，然后前端根据字体大小
比如宽度*12，是前端所需要的宽度。

// 自定义列组件
Vue.component('table-operation', {
  template: `<span>
    <a href="" @click.stop.prevent="update(rowData,index)">编辑</a>&nbsp;
    <a href="" @click.stop.prevent="deleteRow(rowData,index)">删除</a>
    </span>`,
  props: {
    rowData: {
      type: Object
    },
    field: {
      type: String
    },
    index: {
      type: Number
    }
  },
  methods: {
    update () {
      var rowData = this.rowData;
      var $Modal = this.$Modal;
      var options = {
        show: true,
        heigt: 500,
        width: 450,
        title: '编辑',
        component: {
          name: 'edittr',
          data: rowData
        },
        buttons: [
          {
            text: '确定',
            action: function(){
              
              alert(rowData.name);
            }
          },
          {
            text: '取消',
            action: function(){
              $Modal.close(d)
            }
          }
        ]
      }
      var d = $Modal.dialog(options)
    },
    deleteRow () {
      var rowData = this.rowData;
      this.$Modal.confirm('确定要删除数据吗?', function(v){
        if(v){
          alert(rowData.name)
          //后台删除数据
          //这里怎么获得table对象来操作
        }
      })
    }
  }
})

这里的deleteRow 方法, 后台删除数据后，怎么刷新表格？

如标题。

想要删除某一行怎么做啊

列宽拖动在IE9下失效的问题

RT

固定列 设置在 {field: 'name', width: 100, columnAlign: 'center', isFrozen: true}, 很不合理，
固定列只要设置一个数字就可以了，固定左边3列，设置为3.设置为字段的一个属性，又不能固定中间的列。

编辑状态下，已编辑的单元格翻页不会刷新

在弹出的对话框中，带有复杂表头的列表设置了isHorizontalResize,style="width:100%",columns的width，isResize，对话框弹出后表格不显示，拖动网页宽度后，列表正常显示

@huangshuwei

点击表格展开功能没有