Vue项目中的某些小细节处理:超过字数显示省略号等

image.png

1、超过字数显示省略号

代码如下：

<el-table-column  label="数据同步账号"  prop="opfDtAccount" min-width="220">
  <template slot-scope="scope">
    <el-popover placement="top-start" title="下载地址" width="200" trigger="hover"
        :content="scope.row.opfDtAccount">
      <span slot="reference">{{scope.row.opfDtAccount | ellipsis}}</span>
    </el-popover>
   </template>
</el-table-column>

export default {
  filters: {
    //超过20位显示...
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    }
  }, 
......
}

2、显示tab标签效果

<el-table-column  label="状态"  prop="status" min-width="80" 
          :filters="[{ text: '启用', value: 'NORMAL' }, { text: '停用', value: 'STOP' }]"
          :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == 'STOP' ? 'danger' : 'success'"
              disable-transitions>{{scope.row.status=='NORMAL'?'启用':'停用'}}</el-tag>
          </template>
</el-table-column>

 methods: {
    filterTag(value, row) {
      return row.status === value;
    },
    ........
}