[TOC]

简要描述

• 财资业务表格组件

安装

• npm install cz-table -S --registry=http://10.250.4.121:8088/

使用

src/views/cztable/demo.vue

<template>
  <cz-table
    ref="czTable"
    :view-id="viewId"
    @table-define-loaded="tableDefineLoaded"
  >
    <!--表格上方按钮-->
    <div slot="extra_top" class="extra_top">
      <el-button type="primary" icon="el-icon-check" class="extra_top_buttom_right" @click="saveData">保存</el-button>
      <el-button type="primary" icon="el-icon-circle-plus-outline" class="extra_top_buttom_right" @click="addNewRow">新增</el-button>
    </div>
    <!--通过插槽自定义列的展示方式   colId+''Column-->
    <template slot="_optColumn" slot-scope="scope">
      <el-button v-if="!scope.row._editing" type="text" size="small" @click="editRow(scope)">编辑</el-button>
      <el-button v-if="scope.row._editing" type="text" size="small" @click="confirmRow(scope)">确认</el-button>
      <el-button v-if="scope.row._editing" type="text" size="small" @click="cancelEdit(scope)">取消</el-button>
      <el-popconfirm
        v-if="!scope.row._editing"
        title="确认删除？"
        style="margin-left: 10px;"
        @confirm="deleteRow"
      >
        <el-button slot="reference" type="text" size="small">删除</el-button>
      </el-popconfirm>
    </template>
  </cz-table>
</template>

<script>
import {CzTable} from 'cz-table'

export default {
  name: 'Index',
  components: { CzTable },
  data() {
    return {
      viewId: this.$route.query.viewId,
      urlObj: {}
    }
  },
  watch: {
  },
  created() {
    for (var key in this.$route.query) {
      console.log(key)
      if (key !== 'viewId') {
        this.urlObj[this.formatToHump(key)] = this.$route.query[key]
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    addNewRow() {
      console.log(this.urlObj)
      this.$refs.czTable.addNewRow(this.urlObj)
    },
    deleteRow() {
      this.$refs.czTable.deleteRow()
    },
    saveData() {
      this.$refs.czTable.saveData()
    },
    editRow(scope) {
      this.$refs.czTable.editRow(scope)
    },
    confirmRow(scope) {
      this.$refs.czTable.confirmRow(scope)
    },
    cancelEdit(scope) {
      this.$refs.czTable.cancelEdit(scope)
    },
    formatToHump(value) {
      return value.replace(/\_(\w)/g, (_, letter) => letter.toUpperCase())
    },
    // 模型数据加载完，可以由业务层修改
    tableDefineLoaded(tableModel, colModels, searchModels) {
      colModels.push({
        align: 'center',
        colId: '_opt',
        colName: '操作',
        fixed: 'right',
        hasSlot: true,
        isEditable: false,
        isVisible: true,
        isNullable: true,
        showSize: 150
      })
    }
  }
}
</script>

<style lang="scss" >
.extra_top{
  height: 40px;
  padding-top: 9px;
}
.extra_top_buttom_right{
  float:right;
  margin-left:8px;
}

</style>

说明：在页面上直接使用cz-table,只需传viewId：视图ID参数即可 通过slot插槽，可以在表格上方、列、下方，插入自定义按钮，按钮事件调用组件内部的方法实现个性化处理

Methods

| 方法名 | 说明 | 参数 | 返回值 | | :------- | :--- | :----- | :----- | | addNewRow | 新增一行 | defaultData：新增行的默认值，可选 || | deleteRow | 删除行 | || | saveData | 保存编辑数据 | || | editRow | 编辑当前行 | scope || | confirmRow | 编辑后确认 | scope || | cancelEdit | 取消编辑当前行 | scope || | getSelectedData | 获取选中行数据 | |{id:'1',name:'abc'}|

Events

| 事件名 | 说明 | 参数 | | :------ | :--- | ------------------------------------ | | table-define-loaded | 表格定义加载完成 :可以修改表格元数据定义，比如增加自定义操作列、修改某一列的显示样式 | tableModel, colModels, searchModels |

备注

• 更多返回错误代码请看首页的错误代码描述