cstarui v0.1.9

cstarui

TOC

安装

npm install cstarui

引入组件

// main.js 
import Vue from "vue";
import App from "./App.vue";

// 全局引入
import cstarui from "cstarui/packages";
Vue.use(cstarui);

...其他业务逻辑

CTable 使用

本组件基于 el-table 二次开发

<c-table></c-table> or <CTable></CTable>

 <CTable
      :columns="columns"
      :datas="datas"
      :options="options"
      :pagination="pagination"
      @selection-change="handleChangeSelect"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
	<!-- 自定义 表头 -->
	<!-- 
          使用规则 columns 配置项的 slot/prop 属性加 Header 即 v-slot:[`${slot}Header`] / `${prop}Header` 
          如：columns:[{prop:'name',label:'名称'},{slot:'operate',label:'操作'}]
          使用自定义表头插槽示例 
          <template v-slot:nameHeader="{column}">
          </template>
          <template v-slot:operateHeader="{column}">
          </template>
       -->
	  <template v-slot:idHeader="{ column }">
        <span style="color: #ffaaee">
          {{ column.label }}
        </span>
      </template>
	  <!-- 展开行 案例 -->
      <template v-slot:expand="{ row }">
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <span>用户名称：</span>
          <span>{{ row.name }}</span>
        </div>
      </template>
      <template v-slot:operate="{ row }">
        <div
          style="
            width: 200px;
            background: #409eff;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
          "
        >
          自定义操作插槽{{ row.id }}
        </div>
      </template>
	  <template slot="append">
        <div style="padding: 20px">
          append插槽
          插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个
          slot。若表格有合计行，该 slot 会位于合计行之上。
        </div>
      </template>
    </CTable>
...
<script>
  ... 省略部分代码
data() {
    return {
      columns: [
        {
          type: "selection",
          width: 55,
          fixed: "left",
          align: "center"
        },
        {
          type: "expand",
          width: 55,
          fixed: "left",
          align: "center",
        },
        {
          label: "ID",
          prop: "id",
          align: "center",
          minWidth: "80px",
          sortable:true,
          formatter: (row, column, cellValue, index) => {
            return `测试 formatter：${row.id}_${index}`;
          },
        },
        {
          label: "名称",
          prop: "name",
          align: "center",
		  "min-width": "200px", // 或者 minWidth:"200px",
        },
        {
          label: "操作",
          slot: "operate",
          fixed: "right",
          align: "center"
        }
      ],
      datas: [
        {
          id: 1,
          name: "test1"
        },
        {
          id: 2,
          name: "test2"
        }
      ],
      options:{
        border: true,
        headerCellStyle: {
          backgroundColor: '#409eff',
          color: '#fff',
        },
        pagination: true,
        stripe: true,
        // 支持 el-table除data的所有Attr
        // 如 ： 使用max-height的话，可以配置maxHeight或者"max-height" 
        // 包含 - 符号的属性 需要驼峰写法或者加双引号
	  },
      pagination: {
        page: 1,
        size: 10,
        total: 2,
        sizes: [5, 10, 15, 20, 25, 30],
        background: true,
        layout: "total, sizes, prev, pager, next, jumper"
      },
    };
  },
    ...
   methods: {
        ...
          // 选择状态变化事件
          handleChangeSelect(val) {
            console.log(val);
          },
          // 表格显示数据量变化事件
          handleSizeChange(val) {
            this.pagination.size = val.size;
          },
          // 表格页码变化事件
          handleCurrentChange(val) {
            this.pagination.page = val.page;
          }
  		...
   }
</script>

CTable Attributes

CTable Columns

基于 element ui table-column 的除 slot 外的所有 Attributes

CTable Options

基于 element ui table 的除 data 外的所有 Attributes ,增加了pagination 属性

CTable Pagination

CTable Events

基于 element ui table 的所有 Events,增加了 size-change 和 current-change事件

CTable Slot

<!-- 假设有一列配置为{prop:'id'} 则可设置如下插槽 -->
<template v-slot:idHeader="{ column,index }">
  <span style="color: #ffaaee">
    <span>表头标题{{ column.label }}</span>
    <span>表头索引{{ index }}</span>
  </span>
</template>
<template v-slot:id="{ row,index,column }">
  <span>索引{{index}}</span>
  <span>行数据{{row}}</span>
  <span>列数据{{column}}</span>
</template>
<!-- 假设有一列配置为{type:'expand'} 则可设置如下插槽 -->
<template v-slot:expand="{ row,index,column }">
  <span>索引{{index}}</span>
  <span>行数据{{row}}</span>
  <span>列数据{{column}}</span>
</template>
<!-- 插入至表格最后一行之后的内容 -->
<template slot="append">
  <div style="padding: 20px">
    append插槽
    插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个
    slot。若表格有合计行，该 slot 会位于合计行之上。
  </div>
</template>