cst-table

Project setup

npm install cst-table --save

Use

main.js

import 'cst-table'

test.vue

<!--
 * @Description: 列表页
 * @Autor: 徐文东
 * @Date: 2021-06-26 19:41:00
-->
<template>
  <div class="table-page">
    <cst-table :btns="btns" :list="list" :total="total" :options="options" :pagination="pagination" :columns="columns" :operates="operates" @handleSizeChange="handleSizeChange" @handleIndexChange="handleIndexChange"
      @handleSelectionChange="handleSelectionChange" @dbclickRow="dbclickRow">
    </cst-table>
  </div>
</template>
<script>
import cstTable from "./Table.vue";
import { Query } from "./api.js";
export default {
  components: { cstTable },
  data() {
    return {
      btns: [
        { label: '创建发票1', type: 'warning', show: true, icon: 'el-icon-edit', plain: true, disabled: false, method: this.create },
        { label: '创建发票2', type: 'warning', show: true, icon: 'el-icon-edit', plain: true, disabled: false, method: this.create },
        { label: '导出Excel1', type: 'success', show: true, icon: 'el-icon-download', plain: false, disabled: false, method: this.excel, isRight: true },
        { label: '导出Excel2', type: 'success', show: true, icon: 'el-icon-download', plain: false, disabled: false, method: this.excel, isRight: true },
      ],//table上边按钮
      total: 10,//table总条数
      list: [], // table数据
      options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
        showIndex: true,//是否支持列表序号显示
      }, // table 的参数
      columns: [
        { prop: 'ReviseCode', label: '调整单号', align: 'center', isUrl: true, click: this.clickUrl },
        { prop: 'SubmitUserName', label: '提交人', width: '70px', align: 'center' },
        { prop: 'SubmitDate', label: '提交日期' },
        { prop: 'ReviseStatusName', label: '状态', align: 'center', isTemplate: true, formatter: this.formatStatus },
        { prop: 'IsMaker', label: '是否制单', formatter: this.formatMaker },
        { prop: 'AcntNo', label: '回款账号' },
        { prop: 'ActDate', label: '回款日期' },
        { prop: 'OpAcntName', label: '对方单位', showoverflow: true },
        { prop: 'Amount', label: '回款金额' },
        { prop: 'Explain', label: '用途/摘要', showoverflow: true },
        { prop: 'Remark', label: '调整说明', showoverflow: true },
      ], // 需要展示的列
      operates: {
        width: 150,
        fixed: 'right',
        list: [
          {
            id: '1', label: '编辑', type: 'warning', show: true, icon: 'el-icon-edit', plain: true, disabled: false,
            method: (index, row) => {
              this.handleEdit(index, row)
            }
          },
          {
            id: '2', label: '删除', type: 'text', icon: 'el-icon-delete', show: true, plain: false, disabled: false,
            method: (index, row) => {
              this.handleDel(index, row)
            }
          }
        ]
      }, // 列操作按钮
      pagination: {
        pageIndex: 1,
        pageSize: 10
      }, // 分页参数
      searchTerm: {}
    }
  },
  mounted() {
    this.query();
  },
  methods: {
    //#region 初始化
    //查询列表
    query() {
      this.options.loading = true;
      let param = Object.assign(this.searchTerm, {
        PageSize: this.pagination.pageSize,
        PageIndex: this.pagination.pageIndex
      });
      Query(param).then(result => {
        this.options.loading = false;
        this.list = result.Data.DataList;
        this.total = result.Data.DataTotal;
        this.pagination.pageSize = result.Data.PageSize;
        this.pagination.pageIndex = result.Data.PageIndex;
      });
    },
    //#endregion

    //#region table上边的按钮
    create() {
      console.info('create');
    },
    excel() {
      console.info('excel');
    },
    //#endregion

    //#region table事件
    formatStatus(row, column) {
      return `<span style="white-space: nowrap;color: red;">${row.ReviseStatusName}</span>`;
    },
    clickUrl(row) {
      this.$router.push("/contract");
    },
    formatMaker(row, column) {
      return row.IsMaker ? "已制单" : "未制单";
    },
    // formatTime(row, column) {
    //   var time = Util.formatDate.format(
    //     new Date(row.ActDate.replace(/-/g, "/")),
    //     "yyyy-MM-dd"
    //   );
    //   return time;
    // },
    //列表双击行
    dbclickRow(val) {
      console.log('列表双击行val:', val.ReviseCode);
    },
    // 选中行
    handleSelectionChange(val) {
      console.log('列表选中行val:', val)
    },
    // 编辑
    handleEdit(index, row) {
      console.log(' 编辑index:', index)
      console.log(' 编辑row:', row)
    },
    // 删除
    handleDel(index, row) {
      console.log(' 删除index:', index)
      console.log(' 删除row:', row)
    },
    // 切换每页显示的数量
    handleSizeChange(pagination) {
      this.pagination = pagination;
      this.query();
    },
    // 切换页码
    handleIndexChange(pagination) {
      this.pagination = pagination;
      this.query();
    },
    //#endregion
  }
}
</script>