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}}, |