如何直接使用VueQuintable源代码无需搭建完整Vue项目

你引用的演示代码是工程化项目中使用的Vue单文件组件代码，你采用直接引入UMD包的用法无需使用import、export这套语法，按以下步骤修改即可正常使用组件： #

1. 补全依赖引入 #

该组件依赖Bootstrap样式，需要在你的HTML头部先引入本地的Bootstrap CSS文件，否则表格样式会显示异常。

2. 修改HTML中的挂载节点内容 #

将你原本空的#app容器修改为如下内容：

<div id="app">
  <VueQuintable :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>
</div>

3. 替换app.js中的代码 #

直接将演示代码里的data、computed配置平移到你的Vue实例中即可，不需要import和export default相关逻辑。如果需要测试随机数据可以额外引入chance库，不需要的话直接替换rows为你自己的业务数据即可：

var app = new Vue({
  el: '#app',
  data() {
    return {
      config: {
        columns: [
          {
            headline: "Name",
          }, {
            headline: "Age",
            sort:true
          }, {
            headline: "Birth Place",
          }, {
            headline: "Job",
            sort:true
          }
        ],
        multiSort:true,
        multiSortSelect:true,
        pageSort:true,
        pageSortSelect:true,
        pagination:5,
        search:true,
      },
      sortOrder:[{
        index:1,
        asc:false,
      }]
    }
  },
  computed:{
    rows(){
      // 不需要随机测试数据的话，直接返回你自己的表格数组即可
      let count = 30;
      const rows = [];
      // 要使用chance生成随机数据需要额外引入chance的js包，不需要可以删掉这段逻辑
      const chance = new Chance();
      for(let i = 0; i < count; i++){
        const randSortValue = Math.ceil(Math.random() * 10);
        rows.push([
          {
            text:chance.name({ nationality: 'en' })
          },
          {
            text:chance.age()
          },
          {
            text:chance.city()
          },
          {
            html:'<span class="mr-2">' + chance.profession() +'</span><em>'+ "["+randSortValue+"]</em>",
            sortValue: randSortValue
          },
        ]);
      }
      return rows;
    }
  }
})

完整可运行示例参考 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>VueQuintable测试</title>
  <!-- 自行引入本地的Bootstrap CSS文件，否则表格样式会显示异常 -->
  <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
  <!-- 引入你本地的Vue、组件资源 -->
  <script type="text/javascript" src="vue/vue.min.js"></script>
  <script type="text/javascript" src="vue/vue-quintable.umd.min.js"></script>
  <link rel="stylesheet" href="vue/vue-quintable.css">
  <!-- 若需要生成随机测试数据可自行引入本地的chance.js，不需要可删除 -->
  <script src="lib/chance.min.js"></script>
</head>
<body>
  <div id="app">
    <VueQuintable :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          config: {
            columns: [
              { headline: "姓名" },
              { headline: "年龄", sort: true },
              { headline: "出生地" },
              { headline: "职业", sort: true }
            ],
            multiSort: true,
            multiSortSelect: true,
            pageSort: true,
            pageSortSelect: true,
            pagination: 5,
            search: true,
          },
          sortOrder: [{ index: 1, asc: false }]
        }
      },
      computed: {
        rows() {
          // 替换为你自己的业务数据即可
          return [
            [ {text: '张三'}, {text: 25}, {text: '北京'}, {text: '前端开发'} ],
            [ {text: '李四'}, {text: 30}, {text: '上海'}, {text: '产品经理'} ],
            [ {text: '王五'}, {text: 28}, {text: '广州'}, {text: 'UI设计'} ]
          ]
        }
      }
    })
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Manson