VUE实现表格关键字筛选高亮

1,195 阅读1分钟
        <template>
         <input type="search" v-model="search" placeholder="请输入关键字"/>
         
         <p  v-for="(item,index) tables">
         <span v-html=“showDate(index)”><span/>
         <p/>
        </template>
        <script>
        export default {
            data(){
            return{
                tableData:[],
                search:''
            }
            }
         computed: {
              // 实时监听表格
               tables: function() {
                const search = this.search
                if (search) {
                 return this.tableData.filter(T => {
                  return Object.keys(T).some(key => {
                   return String(T[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>