美文网首页前端
element-ui table表格第一行插入输入框搜索框

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

作者: 李小白呀 | 来源:发表于2022-08-26 18:17 被阅读0次

    效果:


    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表格第一行插入输入框

    相关文章

      网友评论

        本文标题:element-ui table表格第一行插入输入框搜索框

        本文链接:https://www.haomeiwen.com/subject/fmfxnrtx.html