Vue 的Element UI 封装 el-table和 el-agination 结合组件

Vue 的Element UI 封装 el-table和 el-pagination 结合组件

• 在后台管理系统中，经常会用到table和pagination 分页结合使用。封装个组件让其试用于所有的表格页面。
• 思路：

1. 确定要封装的内容，从父组件传给子组件的内容和从子组件传给父组件的内容，
2. 熟悉父子组件间传值方法

• 子组件：

<template>
  <div>
    <div class="all_table">
      <el-table :data="tableData" :border="objcontent.border" :stripe="objcontent.stripe" v-loading="objcontent.loading" @selection-change="handleSelectionChange">
        <el-table-column v-if="objcontent.changeselect?objcontent.changeselect:false" type="selection" style="width: 50px;">
        </el-table-column>
        <el-table-column v-if="objcontent.number?objcontent.number:false" type="index" style="width: 50px;">
        </el-table-column>
        <el-table-column v-for="(item,index) in tableColumns" :key="index" :prop="item.prop" :align="item.align" :minWidth="item.minWidth" :label="item.label">
          <template slot-scope="scope">
            <slot :name='index' :row="scope.row">{{scope.row[item.prop]}}</slot>
          </template>
        </el-table-column>
        <el-table-column :min-width="operations.width" :fixed="operations.fixed" :label="operations.label" :align="operations.align" v-if="operations.list.length > 0">
          <template slot-scope="scope">
            <div class="operations">
              <template v-for="(item, key) in operations.list">
                <el-button :type="item.type?item.type:'text'" size="mini" :icon="item.icon" :disabled="item.disabled" @click="item.method(key,scope.row)">{{item.label}}
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" style="text-align:center;margin-top:20px;" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="pager_layout" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      multipleSelection: [],
    };
  },
  methods: {
    // 切换每页显示的数量
    handleSizeChange(val) {
      console.log('每页显示个数', val)
      // this.$emit('update:pageSize',val)
      this.$emit('handleSizeChange', val)
    },
    // 切换页码
    handleCurrentChange(val) {
      console.log('显示第几页', val)
      // this.$emit('update:pageIndex',val)
      this.$emit('handleCurrentChange', val)
    },
    //选择多条
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', val)
    },
  },
  created() { },
  mounted() { },
  computed: {},
  watch: {
  },
  props: {
    tableData: {
      type: Array,
      required: true
    }, //table
    total: {
      type: Number,
      required: true
    }, //总条数
    pager_layout: {
      type: String,
      default: 'total,sizes,prev, pager, next, jumper',
    }, //组件布局
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },//每页显示个数选择器
    pageSize: {
      type: Number,
      default: 10,
      required: true
    },//每页显示个数
    pageIndex: {
      type: Number,
      default: 1,
      required: true
    },//当前页码
    tableColumns: {
      type: Array,
      default: () => [],
      required: true
    },//每列标题名字
    objcontent: {
      type: Object,
      default: {
        border: true,//是否带有纵向边框
        stripe: true, // 是否为斑马纹 table
        loading: true, // 是否添加表格loading加载动画
        changeselect: false,//是否有多选项列
        number: true,//是否有序号
      }
    },//一些表格样式
    operations: {
      type: Object,
      default() {
        return {}
      },//操作按钮
    },
  }
}
</script>
<style scoped>
</style>

• 父组件

<!--
*创建人：
*创建时间：
*说明：设备列表
*修改人：
*修改时间：
*说明：
-->

<template>
  <div>
     <!-- :pageIndex.sync="formData.pageIndex" -->
     <!-- :pageSize.sync='formData.pageSize' -->
    <equimentcomponent 
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @handleSelectionChange="handleSelectionChange" 
     :operations="operations" 
     :objcontent="objcontent" 
     :tableData="tableData" 
     :total='total' 
     :pageIndex="formData.pageIndex"
     :pageSizes='pageSizes' 
     :pageSize='formData.pageSize'
     :pager_layout='pager_layout' 
     :tableColumns='tableColumns'>
       <div slot="0" slot-scope="scope">
         {{scope.row.stationName}}
       </div>
       <div slot="2" slot-scope="scope">
         {{scope.row.deviceTs}}
       </div>
     </equimentcomponent>
    <!-- 删除模态框 -->
    <el-dialog title="是否删除客户" :visible.sync="dialogModalDel" width="38%">
      <div style='text-align:center;height:60px;line-height:60px'>
        <div class='dialog_img_one'>
          <img class='img' src="../../../assets/img/pointcustomer/shanchu_wenhao.png" alt="">
          <span class='dialog_p'>您是否确认删除该设备信息，删除后信息将无法找回？</span>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialogModalDel = false">取 消</el-button>
        <el-button type="primary" @click="gotoDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import equimentcomponent from './equimentcomponent'
export default {
  name: "equipmentlist",
  data() {
    return {
      dialogModalDel: false, //删除模态框标识
      formData: {
        deviceId: undefined,
        deviceName: "",
        stationId: undefined,
        deviceClassVal: "",
        pageSize: 10,
        pageIndex: 1
      }, //搜索表单
      tableData: [],
      tableColumns: [
        {
          prop: "stationName",
          align: "left",
          label: "设备安装位置",
          minWidth: 200,
          slot:true,
        },
        {
          prop: "deviceClassVal",
          align: "left",
          label: "设备类型",
          minWidth: 140,
          formatter: (row, column, cellValue) => {
            console.log(',,,,',row, column, cellValue)
              return `<span style="white-space: nowrap;color: red;">${row.deviceClassVal}</span>`
            }
        },
        {
          prop: "deviceTs",
          align: "left",
          label: "型号",
          minWidth: 120
        },
        {
          prop: "price",
          align: "left",
          label: "金额",
          minWidth: 80
        },
        {
          prop: "ascription",
          align: "left",
          label: "设备归属",
          minWidth: 80,
          render: (h, params) => {
            console.log(h, params)
              return h('el-tag', {
                props: {type: params.row.ascription === '公司购置' ? 'success' : params.row.ascription === '客户自有' ? 'info' : 'danger'} // 组件的props
              }, params.row.ascription === '客户自有' ? '客户自有' : '客户自有')
            }
        }
      ],
      pageSizes: [10, 20, 30, 40],
      objcontent: {
        border: true,//是否带有纵向边框
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否loading(在加载数据时记得判断是否开启)
        changeselect: true,//是否有前面的多选项
        number: true,//是否有序号
      },
      operations: {
        width: 160,
        fixed: 'right',
        label:"操作",
        align:"center",
        list: [
            {
              label: '编辑',
              type: 'text',
              icon: 'el-icon-edit',
              disabled: false,
              method: (index, row) => {
                this.editChange(index, row)
              }
            },
            {
              label: '迁移记录',
              type: 'text',
              icon: 'el-icon-edit',
              disabled: false,
              method: (index, row) => {
                this.historyChange(index, row)
              }
            },
            {
              label: '删除',
              type: 'text',
              icon: 'el-icon-delete',
              disabled: false,
              method: (index, row) => {
                this.delChange(index, row)
              }
            }
          ]
       },//操作按钮
      export_excle_flag: false,//
      total: 0, //总条数
      pager_layout: "total,sizes,prev, pager, next, jumper",//组件布局
      equipmentId: undefined //设备id
    };
  },
computed: { },
created() {
  this.initgetinfocountes();
  this.initquerylistes();
  this.initallcountes();
  this.initoperationslnp();
  this.initoperationsdtpe();
},
activated() { },
mounted() {
},
destroyed() { },
methods: {
  //点击迁移记录
  historyChange(row) {
    this.$router.push({
      name: "migrationhistory",
      params: {
        equipmentrow: row
      }
    });
  },
  //点击编辑
  editChange(row) {
    this.$router.push({
      name: "equipmentedit",
      params: {
        equipmentrow: row
      }
    });
  },
  //点击删除
  delChange(index,row) {
    console.log(index,row)
    this.dialogModalDel = true;
    this.equipmentId = row.id;
  },
  //删除模态框点击确定
  gotoDel() {
    console.log(this.equipmentId)
    delinfobyids.post({ id: this.equipmentId }, this).then(res => {
      if (res !== null) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.dialogModalDel = false;
        this.initquerylistes();
        this.initallcountes();
        this.initgetinfocountes();
      } else {
        this.$message({
          message: "删除失败",
          type: "error"
        });
      }
    });
  },
  // 分页
  handleSizeChange(val) {
    this.formData.pageSize = val;
    this.initquerylistes();
    this.initallcountes();
    this.initgetinfocountes();
  },
  handleCurrentChange(val) {
    this.formData.pageIndex = val;
    this.initquerylistes();
    this.initallcountes();
    this.initgetinfocountes();
  },
  //多选项
   handleSelectionChange (val) {
    console.log('选中的', val)
  },
  //根据检索条件查询客户信息列表
  initquerylistes() {
    let input = this._.cloneDeep(this.formData);
    querylistes.post(input, this).then(res => {
      if (res.code == 200) {
        if (res.data) {
          res.data.map(item => {
            item.stationName = item.stationName ? item.stationName : "库存"
          })
          this.tableData = res.data;
        } else {
          this.tableData = [];
        }
      }
    });
  },
  //根据检索条件查询客户信息列表计数
  initallcountes() {
    let input = this._.cloneDeep(this.formData);
    allcountes.post(input, this).then(res => {
      if (res !== null) {
        this.total = res;
      }
    });
  },
},
watch: { },
components: { equimentcomponent }
};
</script>

<style scoped>
.cursor:hover {
  color: #409eff;
  cursor: pointer;
}
</style>