common-components

安装

yarn add common-components-csy
//or
npm istall common-components-csy

使用

引入

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import commonComponentsCsy from 'common-components-csy'

Vue.use(ElementUI);
Vue.use(commonComponentsCsy)

SvgIcon组件

用法

• 在src目录下创建icons目录，将下载的svg图标放在此目录下
• 使用

<SvgIcon icon-name="add" class="add-svg"></SvgIcon>

Options

| 参数| 说明 | 类型 | 可选值 | 默认值 | | :---- | :---- | :---- | :---- | :---- | | icon-name | svg的名称 | string | -- | -- | | color | 图标的颜色 |string | -- | -- | | size | 图标的尺寸 |string | medium（图标大小为1.5em）/small（图标大小为1em） | -- |

MultistageTable组件

使用

<template>
  <div class="hello">
    <MultistageTable ref="MultistageTable" class="M-table" :colsHead="colsHead" :tableDatas="tableData"
                     :need-select="false" :show-summary="true" :other-cols-head="otherColsHead"
                     :need-page="false" table-height="calc(100vh - 520px)">
      <template #table-column>
        <el-table-column header-align="center" label="插入的输入框" width="167" align="right">
          <template slot-scope="scope">
            <el-input style="font-weight: bold" :ref="`rowInput${scope.$index}`" v-model="scope.row['bcdkje']" placeholder="请输入数据"
                      size="small" class="column-input"></el-input>
          </template>
        </el-table-column>
      </template>
    </MultistageTable>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      colsHead: [{prop: 'htwjbh', label: '表头1'}, {prop: 'cqhtqdsj', label: '表头2'}
        , {prop: 'jdxzmc', label: '表头3'}, {prop: 'bcqrhbbcje', label: '表头4', align: 'right', amount: true}
        , {amount: true, prop: 'dksyje', label: '表头5', align: 'right'}],
      otherColsHead: [{prop: 'bcdkje', label: '表头6', amount: true}],
      tableData:[{htwjbh:'xxx'}],
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

样式

为了保持项目中，其他未使用此组建的表格样式与该组件一致，可以在vuex里面统一设置表头和表格基础样式

  state: {
    cellStyle: {
      'font-size': '14px',
      'padding': '10px 0',
      'color': 'rgba(0, 0, 0, 0.65)',
      border:'1px solid #D4E1E7',
      'borderLeft':'none',
      'borderTop':'none'
    },
    tableHeaderStyle: {
      // 'background': '#fafafa',
      'font-size': '14px',
      'padding': '10px 0',
      'color': 'rgba(0, 0, 0, 0.85)',
      'background':'#C2D8F2',
      border:'1px solid #D4E1E7',
      'borderLeft':'none',
    },
  },

Options

| 参数| 说明 | 类型 | 可选值 | 默认值 | 举例 | | :---- | :---- | :---- | :---- | :---- | :---- | | cols-head | 表头列表，prop：该列只对应的字段名；label：表头名称；amount：是否是金额（金额列需要千分制，所以合计计算的时候需要转换）,align:设置表头的水平位置。不传则默认是left type:如需要编辑单元格，则传input;editable：编辑的单元格初始状态，默认是不可编辑，如需要默认可编辑则传true | Array | -- | -- | [{prop: 'price', label: '成交价格', amount: true,align:'right',type:'input',editable:true}] | | table-datas | 表格数据。有两种格式，需要分页传Object，无分页传Array |Object/Array | -- | -- | Object：{count:200,data:[{name:'张三',age:'18'},{name:'李四',age:'20'}]}，Array：[{name:'张三',age:'18'}] | | otherColsHead | 表格列求和时，如果有一些列不是通过colsHead传过来的，需要通过该参数传过来。数据格式和colsHead一致 |Array | -- | -- | [{prop: 'price', label: '成交价格', amount: true,align:'right'}] | | page | 当前页数，数字类型 |Number | -- | -- | -- | | pageSize | 每页的行数，数字类型 |Number | -- | -- | -- | | needButton | 是否需要表头上面的按钮 |Boolean | -- | true | -- | | needSelect | 是否需要左侧选择框 |Boolean | -- | true | -- | | needPage | 是否需要分页 |Boolean | -- | true | -- | | needIndex | 是否需要左侧第一行的index自动排序 |Boolean | -- | false | -- | | menuList | 右键单击后出现的菜单选项 |Array | -- | [] | [{name:'菜单1',callback:()=>{console.log('菜单1')},id:1},{name:'菜单2',callback:()=>{console.log('菜单2')},id:2}] | | showSummary | 是否在表格下方显示合计行 |Boolean | -- | false | -- | | allowSelect | 在有第一列选择框的时候，是否允许手动选择他的子集 |Boolean | -- | true | -- | | buttonList | 表格上方的按钮列表,name:按钮名字；buttonId：按钮点击之后触发的事件名，isPrimary：是否主要按钮 |Array | -- | []| [{name: '添加', buttonId: 'openAddDialog', isPrimary: '1'}], | | tableHeight | 自定义表格的高度 |String | -- | calc(100vh - 220px) | -- | | hasSelectedRows | 表格默认选中行，数据格式与table-datas单行一致 |Array | -- | -- | -- | | customLongCell | 自定义列的宽度，name为该列的表头名，width为该列需要的宽度类型为数字 |Array | -- | -- | [{name: '动态调整计划名称', width: 275}] | | needSetWidth | 是否需要按照表头文字的长度，设置默认的表头宽度 |Boolean | -- | true | -- | | selectType | 单选/多选 |String | radio/checkbox | -- | -- | | customStyleCell | 自定义单元格或行列的样式，如果要设置整行或整列的样式，只需要将列或行设为null即可 |Array | radio/checkbox | -- | [[rowIndex,columnIndex,{单元格样式对象}],[rowIndex,columnIndex,{单元格样式对象}],] | | totals | 传过来的总的数量数据 | Number | -- | -- | -- | | needTitle | 表格是否需要标题 | Boolean | -- | false | -- | | listTitle | 传过来的列表的标题 | String | -- | -- | -- | | ShowHeader | 表格是否需要表头 | Boolean | -- | true | -- | | listAlign | 标题位置 | String | -- | center | -- |

Events

| 事件名 | 说明 | 参数 | | :---- | :---- | :---- | | dblclick | 双击行时触发的事件 | row | | RowClick | 单击行时触发的事件 | row | | update:completeInput| 表格输入完成时触发的事件 | -- | | cancelSelect| 取消选中行时触发的事件 | row，如果是全选的取消勾选，则参数为字符串all | | currentChange| 翻页时触发的事件 | page,row(当前页的选中行) | | SelectChange| 选中/取消选中行时触发的事件 | row |