element组件学习之列表查询

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

现在要实现这样一个需求，展示一个信息列表，根据后端接口返回的数据展示这个列表，并且加上联动的筛选条件去查询相应结果。要实现这样一个需求，需要用到table、select、form、button等。 下面重点讲一下实现方式。

首先用到一个el-form表单，里面包含了筛选条件和按钮。 这是一个联动查询，{条件一}的可选项在List这个列表中，可以直接在List中写好。 通过List的选项，关联查询出eList的结果，调用的方法就是forListtwo。

 <el-form :inline="true" style="text-aling:center" size="mini">
          <el-form-item label="条件一:">
            <el-select
              v-model="selectone"
              @change="forListtwo"
              placeholder="请选择"
            >
              <el-option
                v-for="item in List"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="条件二:">
            <el-select
              v-model="selecttwo"
              placeholder="请选择"
            >
              <el-option
                v-for="item in Listtwo"
                :key="item.id"
                :label="item.Name"
                :value="item.Name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >
              查找
            </el-button>
          </el-form-item>


 <el-table ref="multipleTable" :data="tableList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableLoading">
        <el-table-column type="selection" width="100"> </el-table-column>
        <el-table-column prop="Id" label="id" width="240"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="120"> </el-table-column>
        <el-table-column prop="old" label="年龄" width="100"> </el-table-column>
        <el-table-column prop="color" label="颜色" width="100"> </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="item">
           <el-tab> {{ StatusMap[item.row.status] }}</el-tab>
          </template>
        </el-table-column>
      </el-table>

<script>
import {

  selecttable
} from '@/api/testDemo'

  mounted() {
    this.StatusMap = {
      2: '一年级',
      3: '二年级',
      4: '三年级',
      5: '四年级',
      6: '五年级',
      7: '六年级',
     
    };
  },

handleSearch() {
      const params = {}
      selecttable(param).then(res => {
        if (
          res.data &&
          res.data.status === true &&
          res.data.responseCode === 2000
        ) {
          console.log(res.data.entry)
          const data = res.data.entry
          this.tableList = data
        } else {
          const data = []
          this.tableList = data
          this.$message.warning(res.data.message)
        }
      })
    },
    forListtwo() {
      const params = {
      one:this.selectone,
      two:this.selecttwo}
      getList(params).then(res => {
        if (
          res.data &&
          res.data.status === true &&
          res.data.responseCode === 2000
        ) {
          this.Listtwo = res.data.entry
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    </script>

该脚本中还包含了一些小功能，比如loading、列宽、行间距、勾选框、状态映射等等。大家可以对照方法名去查看具体是使用方法，这里就不一一说明了。