基于 element ui table内，首行增加input搜索框

做出来是这样的（请忽略样式）

什么不说，直接上代码：

<template>
  <div class="table">
        <el-button type="success" @click='query'>搜一搜</el-button>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column  prop="name" label="姓名">
                <template slot-scope="scope">
                    <div v-if='scope.$index == 0'>
                        <el-input v-model="inputVal" size="small" placeholder="点击搜索姓名"></el-input>
                    </div>
                    <div v-else>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column  prop="name" label="姓名">
                <template slot-scope="scope">
                    <div v-if='scope.$index == 0'>
                        <el-button type="success" @click="btnClick">点击搜索</el-button>
                    </div>
                    <div v-else>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        tableData: [],
        inputVal:'',
      }
    },
    watch:{
        inputVal(val){
            console.log(val)
            this.btnClick();
        }
    },
    methods:{
        btnClick(e){
            console.log(e,'点击按钮')
        },
        query(){
            var arr = [
                {date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                {date: '2016-05-04',name: '章小虎',address: '上海市普陀区金沙江路 1517 弄'},
                {date: '2016-05-01',name: '李小虎',address: '上海市普陀区金沙江路 1519 弄'},
            ];
            arr.unshift({});
            this.tableData = arr;
        }
    }
  }
</script>

 

转载于:https://www.cnblogs.com/zxrbky/p/9488127.html