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 |