承接 封装element的table组件(1) 继续写,这次要写的是自定义选择查看列内容、查询内容
多选项组件
参数说明
参数 | 说明 |
---|---|
columnFilterList | 展示的筛选内容(table展示的列内容) |
// 选项组件
<el-checkbox-group
v-model="checkedProps"
@change="handelColumnFilter"> // checkbox 的change方法
<el-checkbox
v-for="(item, index) in columnFilterList"
:label="item.prop"
:key="index">
{{item.label}}
</el-checkbox>
</el-checkbox-group>
<script>
/**
* @params data 最后选中的值
* 选择操作
*
* 把选中值传回给父组件进行确定要展示的内容
*/
const handelColumnFilter = (data) => {
emit('columnFilterResult', data);
};
</script>
// 父组件
// 选中展示的列
const columnFilterResult = (data) => {
state.columnFilterResultList = data;
state.columnListResult = props.columnList.filter((item) => data.includes(item.prop));
// 把选项选中的值变为列表展示你内容,所以columnListResult才是最终的列表展示内容
};
// 监听筛选列开启关闭
watch(
() => state.showColumnFilter,
(newVal) => {
if (newVal === false) {
state.columnListResult = props.columnList;
}
},
);
// 父组件使用
<template>
<CColumnFilter
v-if="showColumnFilter"
@columnFilterResult="columnFilterResult"
:columnFilterList="columnList">
<!-- columnList是原本该展示的内容列 -->
</CColumnFilter>
</template>
搜索内容框
参数说明
参数 | 说明 | 默认值 |
---|---|---|
searchList | 搜索的内容 | [] |
searchModel | 搜索字段 | {} |
方法说明
方法 | 说明 |
---|---|
submit-search | 确认搜索 |
<template>
<section class="search" v-if="searchList.length">
<CTableSearch
:formList="searchList"
:formModel="searchModel"
></CTableSearch>
<el-button type="primary" size="small" @click="toSearch">查询</el-button>
</section>
</template>
// 查询按钮
const toSearch = () => {
emit('submit-search');
};
form
表单会在后续进行编写
备注
如有错误欢迎指正