简单及又舒服的前端低代码

低代码不只是少写代码而已：代码写得少，bug也就越少（正所谓“少做少错”），因此开发环节的两大支柱性工作“赶需求”和“修bug”就都少了；要测的代码少了，那么测试用例也可以少写不少

1.提高开发效率 2.减少开发成本 3.维护性更高

后台管理系统中频繁出现列表，普通开发代码重复且枯燥，而且可读性差密密麻麻的 一个列表页写上小千行
我们需要解决这个问题，达到方便便捷切代码统一 ，维护方便。

这是一个普通的列表页 在后台管理系统中这种页面数不胜数
这里以element为例 我想法是二次封装组件，将整个页面看成一个大组件，组件中分为三个模块，一个filterHeader、Xtabel（包含footer分页）、
附加代码

<template>
<div class="x-table">
    <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="handleSelectRow" @select-all="handleSelectAll" @selection-change="handleSelectionChange" @filter-change="handleFilterChange">
       
        <el-table-column type="selection" width="55" v-if="isSelection"></el-table-column>
        <el-table-column v-for="item in columns" :key="item.label" :label="item.label" :prop="item.prop" :width="item.width ? item.width : ''" :column-key="item.label" :filter-multiple='!item.fitersType' :filters="item.filters" filter-placement="" :fixed="item.fixed">
            <template slot-scope="scope">
                <template class="operate-btn" v-if="item.operates">
                    <el-button size="mini" v-for="btn in item.operates" :key="btn.event" :type="btn.type ? btn.type : ''" v-permission="btn.permission" v-show="showBtn(scope.row.isShow, btn.text)" @click="handleRowOperate(scope.$index, scope.row, btn.event,btn.text)">{
   {
   btn.text}}</el-button>
                </template>
                <template v-else>
                    <el-input class="edit-input" size="small" v-model="scope.row[item.prop]" v-if="item.cellEdit === 'input'" />
                    <el-cascader v-else-if="item.cellEdit==='cascader'" @change='changeel($event, scope.row, item.prop)' :options="scope.row.serverUserList" v-model='scope.row.echoUserList' :props="props" clearable></el-cascader>

                    <el-select placeholder="请选择" v-model="scope.row[item.prop]" @change="handleCellChange($event, scope.row, item.prop)" @focus="handleCellFocus($event, scope.row, item.prop)" v-else-if="item.cellEdit === 'select'">
                        <el-option v-for="(options,index) in item.options" :key="index" :label="options.label" :value="options.value">
                        </el-option>
                    </el-select>
                    <el-date-picker v-model="scope.row[item.prop]" type="date" value-format="yyyy-MM-dd" placeholder="请选择时间" v-else-if="item.cellEdit === 'date'" />
                    <img v-else-if="item.cellEdit === 'img'" :src="scope.row[item.prop]" alt="" style="width:80px;height:80px;" />
                    <span v-else>{
   {
    scope.row[item.prop] }}</span>
                    <slot :name="scope.row['slot']" v-if="item.prop === scope.row['slot']"></slot>
                </template>
            </template>
        </el-table-column>
    </el-table>
</div>