如何使用Vue和Element-UI进行数据筛选和排序

npm install vuenpm install element-ui

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

<template>  <div>    <el-row>      <el-input v-model="keyword" placeholder="请输入关键字" class="inputItem"></el-input>      <el-button type="primary" @click="search">搜索</el-button>    </el-row>    <el-table :data="filteredData" style="width: 100%; margin-top: 20px;">      <el-table-column prop="name" label="姓名"></el-table-column>      <el-table-column prop="age" label="年龄" sortable></el-table-column>      <el-table-column prop="address" label="地址"></el-table-column>    </el-table>  </div></template><script>export default {  data() {    return {      keyword: '', // 筛选关键字      data: [        { name: '张三', age: 18, address: '北京市' },        { name: '李四', age: 20, address: '上海市' },        { name: '王五', age: 22, address: '广州市' },        { name: '赵六', age: 24, address: '深圳市' }      ]    };  },  computed: {    filteredData() {      return this.data.filter(item => {        return item.name.indexOf(this.keyword) !== -1;      });    }  },  methods: {    search() {      // 筛选功能    }  }};</script><style scoped>.inputItem {  width: 200px;  margin-right: 10px;}</style>