VUE·＜el-table＞的插值方法-CFANZ编程社区

首先是table的写法

<el-table class="table" :data="datalist" border>
        <el-table-column label="身份证号" prop="id" align="center" min-width="140"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" min-width="180"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center" min-width="100"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center" min-width="180"></el-table-column>
        <el-table-column label="职业" prop="job" align="center" min-width="150"></el-table-column>
      </el-table>

<el-table>与普通的<table>书写方式其实没有什么大差别，而<el-table-column>就相当于<table>里<header>的column。值得关注的是 :data 和 prop 两个关键字，你可以理解为datalist是一个字典，其形式如下：

datalist.keySet = {id,name,sex,age,job}

实际上，datalist 在vue中定义为

      datalist: [{
        id: '', // 身份证号
        name: '', // 姓名 
        sex: '', // 性别
        age: '', // 年龄
        job:  '' // 工作
      }],

若datalist赋值

      datalist: [{
        id: '1', // 身份证号
        name: '张三', // 姓名 
        sex: '男', // 性别
        age: '24', // 年龄
        job:  '歌手' // 工作
      },
      {
        id: '2', // 身份证号
        name: '李四', // 姓名 
        sex: '女', // 性别
        age: '25', // 年龄
        job:  '鼓手' // 工作
      },
      {
        id: '3', // 身份证号
        name: '王五', // 姓名 
        sex: '男', // 性别
        age: '35', // 年龄
        job:  '厨师' // 工作
      }
],

则table上会自动插入3行数据

上面是写死的方式将数据插入到表中，若你要动态的调整表中的数据，可以以如下方式

result // 假设result中存有后端返回的json格式的数据，则有如下函数

setTable () {
    this.datalist = [] 每次插值前先置空
    result.forEach((item, index) => {  //对于每一行数据，item表示一个行对象，item表示行号
         this.datalist.push({
            id: item.id,
            name: item.name,
            sex: item.sex,
            age: item.age,
            job: item.job
          })
})
}

你们可以注意到，通过动态插值的方式，datalist甚至不需要提前具体定义，只需要抽象地定义为空数据组，后面的push既是赋值的过程，同时也是一个具体定义datalist的过程，因此你可以很容易推得datalist可以不局限于table中有的字段

result // 假设result中存有后端返回的json格式的数据，则有如下函数

setTable () {
    this.datalist = [] 每次插值前先置空
    result.forEach((item, index) => {  //对于每一行数据，item表示一个行对象，item表示行号
         this.datalist.push({
            id: item.id,
            name: item.name,
            sex: item.sex,
            age: item.age,
            job: item.job,
            father: item.father,
            mother: item.mother,
            sister: item.sister,
            brother: item.brother
          })
})
}

table还是跟原来的展示内容一样，但是datalist已经悄悄地附上了多几个元素。那个小技巧有什么作用呢？

现在假设一个场景：HR在通过网页浏览面试者，table上的每一行就是一个求职者的简略信息。hr突然对一个人比较感兴趣，希望点开这个人的详细信息，那你有两种策略：