elementUI table 自定义序号 (常见table渲染方式) (按钮权限控制)

elementUI table组件自带序号这样写：

分页符像这样

这样写点击切换当前页时，每一页的序号都是从1开始的

如果想要整个表格的序号自定义增长，可以自定义序列号(elementUI table)

其中listQuery.page就是当前页数，listQuery.pageSize就是每页行数

关键代码像这样

(page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1

bootstrap  table 自定义序号

其原理都是通过当前表格的page和size去计算当前行的序号，直接在传入的columns数组中定义：

columnsDataDriver: [
        {
          field: 'no',
          title: '序号',
          align: 'center',
          formatter: function (value, row, index) {
            var pageSize = totalreport.data.queryData.size;     //每页多少条，全局定义的变量
            var pageNumber = totalreport.data.queryData.page; //当前第几页，全局定义的变量
            return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
          }
        },
        {
          field: "statisticsTime",
          title: "统计时间",
        },
        {
          field: "owersName",
          title: "分析对象",
        },
]

 如果不是像我这样将表格的page、size定义为全局变量，那么就要使用bootstrap table的API(getOptions)去获取表格的page和size，然后计算当前的序号

 

table动态渲染这块举几个简单例子，仅供参考

 

// 当前两个例子的columns都是这种格式，具体应用需要自定义
columns: [
        {
          key: 'deviceId',
          title: '终端号',
          width: '180'
        },
        {
          key: 'vehicleNo',
          title: '车牌号',
          width: '120'
        },
        {
          key: 'owersName',
          title: '企业/业户',
          width: '120'
        },
        {
          key: 'platfromName',
          title: '运营商平台',
          width: '120'
        },
        {
          key: 'producerId',
          title: '厂商编码',
          width: '120'
        },
        {
          key: 'modelType',
          title: '终端型号',
          width: '120'
        },
        {
          key: 'simcode',
          title: 'SIM卡号',
          width: '130'
        },
        {
          key: 'bindStat',
          title: '绑定状态',
          width: '120'
        },
        {
          key: 'createTime',
          title: '安装日期',
          width: '180'
        }
      ]

其中button上的v-show为用户按钮权限控制，当前用户级别不够高时，有些按钮可能不做显示，

这个是根据借口查询用户权限做的，也很简单，这里提一下

    getUserInfo() {
      this.$store.dispatch('GetUserInfo').then(res => { // 拉取用户信息（权限）
        if (res.data.perms.indexOf('base:device:view') > -1) { // 查看
          this.viewBTN = true
        } else {
          this.viewBTN = false
        }
        if (res.data.perms.indexOf('base:device:export') > -1) { // 导出
          this.exportBTN = true
        } else {
          this.exportBTN = false
        }
        if (res.data.perms.indexOf('base:device:delete') > -1) { // 删除
          this.delBTN = true
        } else {
          this.delBTN = false
        }
      })
    }
    
    mounted() {
        this.getUserInfo()
    }

GetUserInfo方法（vuex）

// 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getUserInfo(state.token).then(response => {
          if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
            reject('error')
          }
          const data = response.data
          if (data.user) {
            commit('SET_USERRANK', data.user)
          }
          if (data.perms && data.perms.length > 0) {
            commit('SET_PERMS', data.perms)
            commit('SET_BTNPERMS', data.perms)
          } else {
            reject('getUserInfo: perms must be a non-null array !')
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },