ElementUI-plus 在项目中常见的问题

table 表格

边框border、斑马线stripe

	<el-table :data="tableData" style="width: 100%" stripe border>

slot 在表格中添加内容

在template中 添加 #default=“scope” ， 在el-table-column中加key=“slot”。

<el-table-column  label="操作" align="center" width="100" key="slot">
		<template  #default="scope">
				<div class="slot_list">
						<span class="ready_exam">{{scope.row.role_rules}}</span>
				</div>
			</template>
</el-table-column>

修改表头的样式： :header-cell-style

修改表内容的样式： :cell-style=

<el-table :data="tableData" style="width: 100%" stripe border
		:header-cell-style="{background:'#f5f7fa',color:'#606266',textAlign: 'center'}"  :cell-style="{ textAlign: 'center' }">

以下是修改表头的背景色、表头文字居中

:header-cell-style="{background:'#f5f7fa',color:'#606266',textAlign: 'center'}" 

以下是表内容文字居中

 :cell-style="{ textAlign: 'center' }"

表格数据排序 :sortable=“true”

<el-table-column label="排序" :sortable="true" prop="sort">
			<template #default="scope">
					<div class="address_list">
					 <el-input-number
					  v-model="scope.row.sort"
					  :min="1"
					  :max="10"
					 @change="handleCountChange(scope.row)"  />
					</div>
	  	 </template>
</el-table-column>

设置全局的弹框样式（eg:页面中的根class为container ）

eg:切记不用穿透， 写到App.vue中

.container .el-dialog__header {
		background: #f2f2f2 !important;
	}
	.container .el-dialog__footer {
		border-top: 1px solid #e0e0e0;
		margin: 0 10px;
	}

这个设置后的头部和下边框

switch 文字开关组件里面显示

<el-switch v-model="value" active-color="#2d8cf0" inactive-color="#aaa"
 active-value="1" inactive-value="0"  :class="{'switch-is-actived': getTaskSubscribeState('row') == '1'}" 
  :value="getTaskSubscribeState('row')"/>

//以下JS
getTaskSubscribeState(e){
				console.log("e",e);
		},

// 以下css部分
.el-switch {
 ::v-deep .el-switch__core {
    &::before {
      content: '关闭';
      color: #fff;
      position: absolute;
      // font-size: 14px;
      transform: scale(0.85);
      left: 20px;
    }
  }
  &.switch-is-actived {
    ::v-deep .el-switch__core {
      &::before {
        content: '开启';
        left: 10px;
        transform: scale(0.85);
      }
    }
  }
}

如下~

data

houseOption: [
				{
					value: 0,
					label: "全部",
				},
				{
					value: 1,
					label: "住宅",
				},
				{
					value: 2,
					label: "商户",
				},
			],

	<el-radio-group v-model="queryInfo.house_type">
						<el-radio-button
							:label="item.value"
							v-for="(item, index) in houseOption"
							:key="index"
						>{{item.label}}</el-radio-button>
					</el-radio-group>

在编辑弹框中，首次进来switch值没有变化，一直处于关闭状态，

操作: 在active-value 和 inactive-value 加个：即可。

  <el-switch v-model="addQueryInfo.data.statics_status" active-color="#169bd5" inactive-color="#aaa"
              :active-value="1" :inactive-value="0" @change="switchChange"/>

修改表格背景，文字颜色

   /* 表格内背景颜色 */
        &::v-deep .el-table th {
            background-color: #c4b3ab !important;
            color: #1a1aa8 !important;
        }
        &::v-deep .el-table tr {
            background-color: #c4b3ab !important;
            color: #1a1aa8 !important;
        }
        &::v-deep .el-table td {
            background-color: #c4b3ab !important;
            color: #1a1aa8 !important;
        }