封装element的table组件(2)

386 阅读1分钟

承接 封装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表单会在后续进行编写

备注

代码

如有错误欢迎指正