一、前言

目前在公司做一个机器预览功能，表格里边需要一个根据IP搜索的功能。

二、思路

在 table 的 data 绑定 filter，如：

<el-table :data="currentHardwareData.list.filter(item => (~item.domain.indexOf(search)))">

三、代码

<el-table :data="currentHardwareData.list.filter(item => (~item.domain.indexOf(search)))">
  <el-table-column type="index"></el-table-column>
<el-table-column property="domain" label="DOMAIN"></el-table-column>
<el-table-column align="center" label="监控状态">
  <template slot-scope="scope">
    <el-radio-group v-model="scope.row.yn" size="mini" @change="(value) => monitorHardware(scope.$index,scope.row,value) ">
      <el-radio-button label="1">开启</el-radio-button>
<el-radio-button label="0">关闭</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
  <template slot-scope="scope">
    <el-button type="text" size="small" @click="deleteHardware(scope.$index,scope.row)">移出</el-button>
</template>
</el-table-column>
</el-table>

四、效果

五、小结

感觉这是目前为止最简单的方法了。

其次比较次的做法：

① 增加button绑定点击事件：增代码量，无法根据输入实时显示表格内容。

② 输入框search绑定监听事件：增代码量。

等等