【UI】 element ui 表格没有数据时用--填充

简介: 【UI】 element ui 表格没有数据时用--填充


具体效果

实现代码

第一种方法 加class类名

style中

.table :empty::before {
    content: "--";
    color: gray;
  }

注意:如果使用了switch滑块steps步骤条等,可能也会被加上--,效果就变成了

解决

template中,给switch滑块加class

<el-table-column label="状态" width="90" prop="status" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="statusMonitor(scope.$index, scope.row)"
            :active-value="0"
            :inactive-value="1"
            class="status" 
          >
          </el-switch>
        </template>
      </el-table-column>

style中

.status :empty::before {
    content: "";
    color: red;
  }

第二种方法 template中

<el-table-column label="维护开始时间" align="center" width="180">
   <template slot-scope="scope">{{
     scope.row.startTime ? scope.row.startTime : "--"
   }}</template>
 </el-table-column>

下班~

目录
相关文章
|
6天前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
55 1
|
6天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
6天前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
31 1
|
6天前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
20 1
|
5天前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
14 3
|
6天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
22 1
|
6天前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
34 1
|
6天前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
6天前
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
39 1
|
6天前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
21 1

热门文章

最新文章