1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

<template>

 <div class="">

 <div class="top">

 <!-- 筛选 -->

  <div class="screen">

  <div style="width:30%">筛选：</div>

  <el-input type="search" v-model="search" style="width:70%" placeholder="请输入关键字"></el-input>

  </div>

 </div>

 <!-- 表格 -->

 <div class="table">

  <el-table

  :data="tables"

  style="width: 100%"

  max-height=500>

  <!-- 地址 -->

  <el-table-column label="时间">

   <template slot-scope="scope">

   <span class="col-cont" v-html="showDate(scope.row.date)" ></span>

   </template>

  </el-table-column>

  <!-- 用户名 -->

  <el-table-column label="用户名">

   <template slot-scope="scope">

   <span class="col-cont" v-html="showDate(scope.row.name)" ></span>

   </template>

  </el-table-column>

  <!-- 地址 -->

  <el-table-column label="地址">

   <template slot-scope="scope">

   <span class="col-cont" v-html="showDate(scope.row.address)" ></span>

   </template>

  </el-table-column>

  </el-table>

 </div>

 </div>

</template>

<script>

 export default {

 data() {

  return {

  search: '',

  tableData: [{

   date: '2016-05-02',

   name: '张三',

   address: '上海市普陀区金沙江路 1518 弄'

  }, {

   date: '2016-05-04',

   name: '李四',

   address: '上海市普陀区金沙江路 1517 弄'

  }, {

   date: '2016-05-01',

   name: '王五',

   address: '上海市普陀区金沙江路 1519 弄'

  }, {

   date: '2016-05-03',

   name: '赵六',

   address: '上海市普陀区金沙江路 1516 弄'

  }]

  }

 },

 components: {},

 computed: {

 // 实时监听表格

  tables: function() {

  const search = this.search

  if (search) {

   return this.tableData.filter(dataNews => {

   return Object.keys(dataNews).some(key => {

    return String(dataNews[key]).toLowerCase().indexOf(search) > -1

   })

   })

  }

  return this.tableData

  }

 },

 mounted() {},

 methods: {

  // 筛选变色

  showDate(val) {

  val = val + '';

  if (val.indexOf(this.search) !== -1 && this.search !== '') {

   return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')

  } else {

   return val

  }

  }

 }

 }

</script>