vue中el-table的简单使用

2020-04-16  本文已影响0人  五四青年_4e7d

情景一

作用域插槽slot-scope="scope"循环判断

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
          <template  slot-scope="scope">
           <el-tag   type="warning"  v-if="scope.row.name == '成功'">成功</el-tag>
           <el-tag   type="success"  v-else-if="scope.row.name == '失败'">失败</el-tag>
            <el-tag   type="success"  v-else>进行中</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="地址">
      </el-table-column>
    </el-table>

过滤:

比如传过来的数组是numbers要过滤掉不能被整除的

computed:{
    evenNumbers:function(){
      return this.numbers.filter(function(number){
      return number%2===0
      })
    }

排序:https://www.cnblogs.com/lianxisheng/p/10023346.html

http://www.teamsfy.com/html/r_0199dfe2727246c2bfcd96a8af1e49ab.html

上一篇 下一篇

猜你喜欢

热点阅读