element-ui table表格第一行插入输入框搜索框

效果:


image.png

实现代码:

 <el-table-column
          prop="expertName"
          label="专家姓名"
        >
          <template slot-scope="scope">
            <div v-if="scope.$index == 0">
              <el-input
                v-model="form.expertName"
                size="small"
                placeholder="点击输入专家姓名"
              />
            </div>
            <div v-else>{{ (scope.row.expertName) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="expertJob"
          label="职务"
        >
          <template slot-scope="scope">
            <div v-if="scope.$index == 0">
              <el-select v-model="form.expertJob">
                <el-option
                  v-for="item in expertJob"
                  :label="item.itemValue"
                  :value="item.itemId"
                  :key="item.itemId"
                ></el-option>
              </el-select>
            </div>
            <div v-else>{{ (scope.row.expertJob) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="expertTitleDesc"
          label="职称"
        >
          <template slot-scope="scope">
            <div v-if="scope.$index == 0">
              <el-select v-model="form.expertTitle">
                <el-option
                  v-for="item in title"
                  :label="item.itemValue"
                  :value="item.itemId"
                  :key="item.itemId"
                ></el-option>
              </el-select>
            </div>
            <div v-else>{{ (scope.row.expertTitleDesc) }}</div>
          </template>
        </el-table-column>

    doQuery() {
      getExpertList(this.form)
        .then(data => {
          let checkmsg = this.$checkResult(data)
          if (checkmsg === 'OK') {//成功返回
            data.rows.unshift({})
            this.tableData = data.rows
          } else {
            this.$message.error(checkmsg)
          }
        })
      },

参考:VUE element-ui 之table表格第一行插入输入框

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容