美文网首页前端
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