element ui 表格小知识点

1.设置表格数据过长时文字提示show-overflow-tooltip 设置主题为dark/light tooltip-effect=“dark”
2.设置表头样式 :header-cell-style="{background:’#333’}"
3.设置多选框根据表格内容禁用 selection里添加:selectable=‘checkboxInit’，在methods中checkboxInit设置禁用条件（函数名可以随意起咯）
4.根据表格内容设置样式 在需要设置样式的行中添加v-if条件

1. html

<el-table size="mini" :header-cell-style="{background:'#333'}" 
	v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark"
    @selection-change="handleSelectionChange"
 >
	<el-table-column type="selection" :selectable='checkboxInit' width="45"></el-table-column>
	<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
	<el-table-column prop="status" label="状态" show-overflow-tooltip>
	  <template scope="scope">
		<span
		  v-if="scope.row.status==='正常'"
		  style="color:blue;
		>{{ scope.row.status }}</span>
		<span
		  v-if="scope.row.status=== '注销'"
		  style="color:red;
		>{{ scope.row.status }}</span>
	  </template>
	</el-table-column>
</el-table>			

2. methods

//设置表格禁用
    checkboxInit(row,index){
      if (row.status=="注销") {//需要判断的条件
        return true;//不可勾选
      }else{
        return false;//可勾选
      }
    },

这段时间用element ui比较多，记一下学习表格组件时总结的一些知识点，如果再碰到接着更新
如果有建议，大家一起交流^ _ ^