重复代码组件

表格

通常一个表格会有许多表头，则我们需要写很多表格栏，重复去写类似下面代码

<el-table-column prop="date" label="日期" width="180"></el-table-column>

但我们是实际上可以循环来实现，将表格栏名称，属性值都放进一个数组里，再去循环该数组生成我们要的表格栏

    const columns = [
          {
            title: 'ID',
            dataIndex: 'id',
          },
          {
            title: '角色名称',
            dataIndex: 'id',
          },
          {
            title: '权限字符',
            dataIndex: 'id',
          },
          {
            title: '权限',
            dataIndex: 'id',
          },
          {
            title: '状态',
            dataIndex: 'id',
          },
          {
            title: '创建时间',
            dataIndex: 'id',
          },
          {
            title: '操作',
            dataIndex: 'id',
          },
    ],
    
    <el-table-column 
       v-for="(item,index) in columns" 
       :prop="item.dataIndex" 
       :label="item.title" 
       :key="item.dataIndex" 
       width="180"
    >
    </el-table-column>

当然这是我们最基础的写法，通常表格还会涉及到一些数据处理，操作等，就需要用到插槽
首先我们来说操作按钮，上面的数据属性是不够用的，我们需要增加数据的属性来控制插槽的使用
比如我再增加一个属性为solt:true,然后再去组件里写

          {
            title: '操作',
            dataIndex: 'id',
            solt:true
          },
          
         <el-table-column 
           v-for="(item,index) in columns" 
           :prop="item.dataIndex" 
           :label="item.title" 
           :key="item.dataIndex" 
           width="180"
        >
                <template slot-scope="scope">
                    <div>
                       <div v-if="item.solt">
                          <el-button type="primary" class="primary-btn" size="mini">
                          删除
                          </el-button>
                       </div>
                    </div>
                </template>
        </el-table-column>

当然如果按钮是放在表格最前面或者最后面也可以直接按照以前的写法，直接往后面写就好了

     <el-table-column 
       v-for="(item,index) in columns" 
       :prop="item.dataIndex" 
       :label="item.title" 
       :key="item.dataIndex" 
       width="180"
    >
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
            </el-button> <el-button type="text" size="small">
            编辑</el-button>
        </template>
    </el-table-column>

然后如果需要插入多种，比如又要按钮，表格中的数据也要做处理，就需要多几种插槽状态

          {
            title: '操作',
            dataIndex: 'id',
            solt:'btn'
          },
          {
            title: '操作',
            dataIndex: 'id',
            solt:'input'
          }
          ...
          <el-table-column 
           v-for="(item,index) in columns" 
           :prop="item.dataIndex" 
           :label="item.title" 
           :key="item.dataIndex" 
           width="180"
        >
                <template slot-scope="scope">
                    <div>
                        <div v-if="item.solt === 'input'">
                            <el-input 
                              :rows="4" 
                              v-model="currentResults[scope.$index].callResult">
                            </el-input>`
                       </div>
                       <div v-if="item.solt === 'btn'">
                          <el-button type="primary" class="primary-btn" size="mini">
                          删除
                          </el-button>
                       </div>
                    </div>
                </template>
        </el-table-column>

希望这个优化能对大家有所帮助，萌新的第一篇文章，有不对或者不足的地方望大家指正