美文网首页
vue中el-table的简单使用

vue中el-table的简单使用

作者: 五四青年_4e7d | 来源:发表于2020-04-16 00:10 被阅读0次

情景一

作用域插槽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

相关文章

网友评论

      本文标题:vue中el-table的简单使用

      本文链接:https://www.haomeiwen.com/subject/dbwkvhtx.html