vue 前端用法汇总二

一、列表中el-table用法

1、字数超长之后用点显示属性

show-overflow-tooltip

2、固定列

 <el-table-column fixed="right" label="操作" width="120">

fixed="right" 固定在右边 left  固定在左边

3、字体居中 align="center"

 <el-table-column prop="totalPersonCount" label="总数" align="center">

4、大于当前日期不允许选择

 <el-form-item prop="yearMonth" label="上报年月">

         <el-date-picker v-model="addForm.yearMonth" type="month" :picker-options="expireTimeOption" placeholder="请选择上报年月" style="width:100%;" value-format="yyyy-MM" />

</el-form-item>

  data() {

    return {

      // 只能选择之前的数据，不允许选择之后的数据

      expireTimeOption:{

        disabledDate(date){

          return date.getTime() > Date.now();

        }

      },

 }

}

5、输入框后面带有单位

<el-form-item label="总数" prop="totalCount">

      <el-input v-model="addForm.totalCount" type="number" :min="0" maxlength="11" placeholder="请输入总数"><template slot="append">支</template></el-input>

</el-form-item>

 

 6、列表中根据值的大小进行颜色的区分显示，如果为0 用红色标红

<el-table-column prop="officialCount" label="办公室人员数" width="100" align="center">

                <template slot-scope="scope">

                  <span :style="{'color':scope.row.officialCount ===0 ?'red':'#606266'}">{{ scope.row.officialCount }}</span>

                </template>

 </el-table-column>