0.2.1 • Published 1 year ago
ye_element_table(封装 element ui 中表格组件)
1. 安装
npm install ye_element_table
2. 引入组件
2.1 在 main.js 中引用
import yeElementTable from 'yeElementTable'
Vue.use(yeElementTable)
3. 使用
3.1 html 中使用标签
<yeElementTable :tableOption="tableOption" @get-table-data="getTableData">
<template v-slot:menu="scope">
<el-button @click="handleClick(scope.row)">操作列插槽</el-button>
</template>
<template v-slot:sexSlot="scope">
<el-tag>{{scope.row.表格列插槽}}</el-tag>
</template>
</yeElementTable>
3.2 表格参数 tableOption
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| name | 表格名称 | String | | ye-table |
| tableColumnList | 表格列 | List | 详见 tableColumnList 参数 | [] |
| api | 表格接口 api | api | | |
| searchParams | 调接口，传的参数 | Object | | {} |
| operaColumnParams | 用于设置是否显示操作列和显示操作列的宽度 | Object | {isShow: true,width: 100px} | {isShow: false,width: 100px} |
3.2.1 tableColumnList 参数
tableColumnList为数组，数组的一项，每一项为一个对象，代表设置表格一列的参数，对象参数如下
| 参数 | 说明 | 类型 | 是否必填 | 备注 |
|---|
| prop | 列名 | String | 是 | |
| label | 列中文名 | String | 是 | |
| width | 列宽度 | String/Number | 否 | |
| isSlot | 该列是否为插槽 | boolean | 否 | 若为 true，需要在标签中添加插槽，例子详见：操作列插槽 |
| formatter | 自定义列 | function | 否 | formatter: (row)=>{return row.class}}, |