表格组件

阅读: 1749    发布时间: 2018-09-05 10:03:58

github地址:https://github.com/501351981/vue_yii_cms

后台用的最多的组件莫过于表格了,我希望的表格组件要有这些功能

  • 表头固定

  • 包含分页功能

  • 数据请求显示loading

  • 支持单选,多选

  • 使用简单

  • 支持根据url自动请求数据,或者直接给表格传一个数组

  • 能够对ajax请求的数据进行处理


先看使用的范例

<template>
  <div>

    <table-box ref="tableBox" :url="table.url" :columns="table.columns" :key-name="table.keyName" :parse-data="table.parseData" :data="table.data" :multi-select="table.multiSelect">

        <tr slot="row"  slot-scope="props">
          <td class="tc">{{props.index}}</td>
          <td class="tc"><i :class="props.item.icon"></i></td>
          <td>{{props.item.name}}</td>
          <td class="tc">{{props.item.sort}}</td>
          <td>
            <button-box class="btn-info btn-sm" :to="'/menu/children?pid='+props.item.id+'&ptitle='+props.item.name">设置子菜单</button-box>
            <button-box class="btn-warning btn-sm" :to="'/menu/rights?pid='+props.item.id+'&ptitle='+props.item.name">设置子权限</button-box>
          </td>
        </tr>


    </table-box>

    
  </div>
</template>

<script>

 import api from '../../utils/config/api'

 import TableBox from '../../components/mod/TableBox'
 import ButtonBox from  '../../components/mod/ButtonBox'

 export default {
    name: 'MenuIndex',
 components: {TableBox,ButtonBox},

 data:function () {
      return {
        table:{
          url:api.menu_index,
 multiSelect:false,
 keyName:'id',
 columns:[
            {
              title:"图标",
 field:"icon",
 width:'80'
 },
 {
              title:"名称",
 field:"name",
 width:''
 },
 {
              title:"排序值",
 field:"sort",
 width:'100'
 },
 {
              title:"操作",
 field:"caozuo",
 width:'200'
 },
 ],
 parseData:function (data) {
            data.forEach(function(row){
             //对获取的数据做处理
            })
          }
   },
 
  }
</script>

<style lang="less" scoped>

</style>

在data中,初始化table的url、单选还是多选、keyname(选中行的时候,返回keyname)、表头信息,表头放在这里是因为我们表格组件要实现表头固定,实际是使用了两个表格,也就是有两个表头,如果通过slot的方式传入表头,就需要2个重复的表头,所以不理想。

表格组件完整代码

{:}序号 in .{{.}}序号 in .{{.}}(,) in (){{()}} in  {{[.]}}
                   纪录总数:{{}},共{{}}页,每页显示:510203050100条记录
         {:==1}>1&&(1)首页{:==1}>1&&(-1)上一页 in {:==}!=&&(){{}}{:==}<&&(+1)下一页{:==}<&&()尾页 network  {
    : :{
      : : :{
        : : } :{
        : : } : : :{
        : : }
    } :{
      :(newdata) {
        .(.)
      }
    } :() {
      {
        :[] : :{} : : : :[] :[] :. :. : }
    } :{

    } :() {
      .(.)
    } :{
      :(index) {
        (.-)*.+index+ } :() {
        .$refs.tableHead.scrollLeft=.$refs.tableBody.scrollLeft
      } :() {
         .=.(./.)

        = (.-)<?:(.-)
        = (.+)>.?.:(.+)
        .=[]
        (=<=++){
          ..()
        }
      } :(page){
         (.){
          .= network.(.{
            :page :. .... }).(res=>{
            .=page
            .=res. .=res. (.){
              .(.)
            }

            .()
            .()
            .= }).(()=>{
            .= })
        }(.){
          .=page
          .=..length
          .=[]
          (=<.++){
            =(.-)*.+ (<=..length-){
              ..(.[])
            }
          }
          (.){
            .(.)
          }
          .()
          .()


        }{
          .()
        }


      } :(){
         =  .=[]

        (()=>{

          (.$refs.tableBody.offsetHeight<.$refs.tableBody.scrollHeight){
            .= }

          =.$refs.tableBody.()[].()

          (=<.++){
            [].= [].=(e) {
             (.){
                (.==){
                 .= = ..() (> -) {
                   ..() }
               }{
                 .= ..()
               }


             }{
                (.==){
                  }{
                  (=<.++){
                   [].= }
                 .= .[]= }
             }
            }
          }

        })
      } :() {
        =[]
        (=<..length++){
          =.[.[]]
          .([.])
        }

         } :() {
        =[]
        (=<..length++){
          =.[.[]]
          .()
        }

         } :(params={}) {
         .=params
        .(.)
      } :(params={}){
         .=params
        .= .(.)
      } :() {
        .= .()
      }
    }

  }
  {
    {
      : () }
    {
      : () }
  }

  .{
    : % :  :  :  :   :  .{
      .{
        :  }
      .{
        ::{
          :  :  }
        ::{
          :  :  }
        ::{
          :  :  }
      }
    }

    {
      : : : :  :  }

    .{
      :  :  {
        :  {
          :  :  :  :  :  .{
            :  :  : - :  :  : % :  }

          :{
            :  }
          :{
            :  }

        }
      }
    }

    .{
      :  :  :  :  : % : % : () :  :  :  .{
        :  :  :  :  :  :  : % :  }
    }
    .{
      :  :  :  :  :  :  :  ::{
        :  :  }
      ::{
        :  :  }
      ::{
        :  }
      ::{
        :  :  }


      ..{
        :  :  :  :  :  :  :  :  }
      {
        {
          .{
            :  }
        }
        {
          :  :  :  :{
            :  }

          :{
            :  }

          .{
            :  :  }

        }
        .{
          :  :  }
      }

    }
  }

  .{
    : % :  :  :  :  .{
      .{
        :  :  :  }
      {
        :  :  }
    }
    .{
      {
        {
          :  :  :  :  :  :  :   :  .{
            :  :  :  }

          .{
            :  :  }
        }
      }
    }
  }




-END-