vue-easytable问题笔记

前端


文章参考

  1. vue-easytable
  2. 排序
  3. 安装
  4. 拖拽

无法访问vue-easytable的API页面

之前收藏了vue-easytable的API页面，方便时刻查阅，前几次还好，后面发现推荐给同事和自己打开的时候，就出现了无法访问，开始以为是网络问题或者是服务器挂了，后面发现，只要通过github链接过去就可以了。

排序的问题

根据文档，只需要添加multiple-sort属性即可，但是页面还是无法出现相关的图标，最后跟官网的demo每个字段做相关的对比，原来是我的cloumn的值要在对应的字段中添加orderBy:'asc'属性

export default{
  name: 'sort-by-multiple-columns',
  data(){
    return {
      tableData: [
          {"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"}
      ],
      columns: [
          {field: 'name', title: '姓名', width: 80, titleAlign: 'center',columnAlign:'center',orderBy:'asc',isResize:true}
    }
  },
  methods: {
  }
}

拖拽的问题

根据文档的要求，我只需要添加 column-width-drag 这个组件就可以了，发现不管怎么使用，都无法拖拽。最后找同事帮忙解决了，原来是因为我设置了不显示表格的border；即 :show-vertical-border='true'即可

<v-table :columns='columns' :table-data='tableData' :show-vertical-border='true' column-width-drag >v-table>