elementui封装的table组件单元格放"下拉框"和"数字计数器"

效果：

<template>
  <div>
    <slot name="header" :scope="{ form, search, create }" />
    <el-table :data="tableData" style="width: 100%">
    
      <el-table-column align="center" :key="item.key" :label="item.label" :width="item.width ? item.width : ''"
        v-for="item in head">
        <template slot-scope="scope">

          <template v-if="item.type == 'select'">
            <el-select v-model="value1" :placeholder="'请选择'   item.label">
              <el-option v-for="item in scope.row.stockroom" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>

          <template v-if="item.type == 'input-number'">
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>

          <template v-if="item.type == 'input'">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">
              <el-tag size="medium"> {{ scope.row[item.key] }}</el-tag>
            </span>
          </template>

        </template>
      </el-table-column>

      <el-table-column v-if="operate.length > 0" label="操作" :width="operate.length * 80" align="center">
        <template slot-scope="scope">
          <div style="display: flex; flex-direction: row;">
            <template v-for="(item, index) in operate">
              <div :key="index" style="margin: 0 5px">
                <el-button v-if="item.type == 'edit'" size="mini" :title="item.name" type="primary"
                  @click="handleEdit(scope.row)">
                  {{ item.name }}
                </el-button>
                <el-button v-else-if="item.type == 'delete'" size="mini" :title="item.name" type="danger"
                  @click="handleDelete(scope.row.id, scope.$index)">
                  {{ item.name }}
                </el-button>
                <el-button v-else-if="item.type == 'detail'" size="mini" :title="item.name"
                  @click="handleDetail(scope.row)">
                  {{ item.name }}
                </el-button>
                <el-button v-else size="mini" :title="item.name"
                  @click="$emit('click-item', { data: scope.row, index: scope.index, event: item.type })">
                  {{ item.name }}
                </el-button>

              </div>
            </template>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ListTable',
  props: {
    mode: {
      type: String,
      required: true,
      default: '',
    },
    head: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    },
    operate: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      num: 1, //计数器
      value1: '', //下拉框
      page: 1,
      pageSize: 30,
      list: [],
      total: 0,
      form: {},
      loading: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        stockroom: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面（传统面食）'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }, {
        date: '2016-05-04',
        name: '王小虎',
        stockroom: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面（传统面食）'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }, {
        date: '2016-05-01',
        name: '王小虎',
        stockroom: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面（传统面食）'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }, {
        date: '2016-05-03',
        name: '王小虎',
        stockroom: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面（传统面食）'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }]
    }
  },
  computed: {
    //请求的接口地址
    getUrl () {
      let UpperCaseMode = this.mode.toUpperCase()
      return UpperCaseMode.replace(/-/g, '_')   '_LIST'
    },
    deleteUrl () {
      let UpperCaseMode = this.mode.toUpperCase()
      return 'DELETE_'   UpperCaseMode.replace(/-/g, '_')
    },
    //跳转的表单路径
    editPath () {
      let path = ''

      switch (this.mode) {
        case 'user':
          path = 'user-edit'
          break
        case 'department':
          path = 'department-edit'
          break
        case 'device':
          path = 'device-edit'
          break
        case 'train-device':
          path = 'train-device-edit'
          break
        case 'track':
          path = 'track-edit'
          break
        case 'train':
          path = 'train-edit'
          break
        case 'route':
          path = 'route-edit'
          break
      }

      return path
    },
  },
  created () {
    //获取表格数据 
    this.getData(this.page, this.pageSize)
  },
 
  methods: {

    // 获取表格数据
    getData (page, pageSize) {
      console.log('getData进来了', this.getUrl);
      let params = {
        page: page,
        pageSize: pageSize,
      }
      params = {
        ...params,
        ...this.form,
      }

      this.$request(this.getUrl, params)
        .then(({ data }) => {
          this.loading = false
          const { list, totalSize } = data
          console.log('mode', this.mode);
          this.list = list;
          this.total = parseInt(totalSize)

        })
        .catch(error => {
          this.loading = false
        })

    },

    //新建
    create () {
      if (!this.editPath) {
        return
      }
      this.$router.push({ path: this.editPath, query: { mode: 'new' } })
    },

    //点击表格的编辑按钮
    handleEdit (data) {

      localStorage.setItem('dataForm', JSON.stringify(data))
      if (!this.editPath) {
        return
      }

      this.$router.push({
        path: this.editPath,
        query: { id: data.id, mode: 'edit' },
      })
    },

    handleDetail (data) { },

    handleDelete (id, index) { },

    search () {
      console.log('调用了search方法');
    },

  }
}
</script>

 <list-table :head="head" :operate="operate">

      <!-- <div slot="header" slot-scope="{scope}" class="header">
        <el-button type="primary" size="mini" @click="scope.create()">
          新建
        </el-button>
      </div> -->

      <div slot="header" slot-scope="{scope}" class="header">
        <el-form inline :model="scope.form" class="form-inline">
          <el-form-item label="工班">
            <el-select v-model="scope.form.monitor_id" />
          </el-form-item>
          <el-form-item label="人员">
            <el-select v-model="scope.form.user_id" />
          </el-form-item>
          <el-form-item label="列车">
            <el-select v-model="scope.form.car_id">
              <el-option v-for="train in trains" :key="train.id" :label="train.number" :value="train.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="故障类别">
            <el-select v-model="scope.form.fault_type_id">
              <el-option v-for="fault in faultType" :key="fault.id" :label="fault.name   '('   fault.abbreviate   ')'"
                :value="fault.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="scope.form.search_time_array" type="daterange" value-format="timestamp"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-button style="margin-top:5px;" type="primary" size="small" @click="scope.search()">
            查 询
          </el-button>
        </el-form>
      </div>

    </list-table>
    
<script>
export default {
  name: 'app',
  data () {
    return {
      head: [
        {
          label: '用户名',
          key: 'name',
          type: 'input'
        },
        {
          label: '日期',
          key: 'date',
          type: 'input'
        },
          {
          label: '计划数量',
          key: 'num',
          type: 'input-number'
        },
         {
          label: '仓库/库区',
          key: 'stockroom',
          type: 'select'
        },
      ],
      operate: [
        {
          name: '编辑',
          type: 'edit',
        },
        {
          name: '删除',
          type: 'delete',
        },
      ],
    }
  }
}
</script>  

这篇好文章是转载于：学新通技术网