uniapp使用elementui表格等组件

uniapp使用elementui表格

安装element-ui

npm i element-ui -S

引入Element

直接使用组件

<el-table :data="list" style="width: 100%" size="small"  border >
			 
		   
		   <el-table-column prop="status" label="签约日期" width="90">
		     <template slot-scope="scope">
		   	 
		   	  <text>{{scope.row.sign_year}}-{{scope.row.sign_month}}-{{scope.row.sign_date}}</text>
		   	   
		     </template>
		   </el-table-column>
		   <el-table-column  prop="type_name" label="合同类型" width="90"> </el-table-column>
		   <el-table-column  prop="contranct_title" label="合同名称" width="100"> </el-table-column>
		   
		    <el-table-column  prop="purchaser" label="乙方" width="130"> </el-table-column>
			<el-table-column  prop="real_name" label="经办人" width="100"> </el-table-column>
			<el-table-column prop="status" label="状态" width="60">
			  <template slot-scope="scope">
				  <!-- 0=待确认；1=待签署；2=已完成 -->
				  <text v-if="scope.row.status==0" class="st" style="">待确认</text>
				  <text v-if="scope.row.status==1" class="st" style="">待签署</text>
				  <text v-if="scope.row.status==2" class="st" style="">已完成</text>
			  </template>
			</el-table-column>
			 
		    
		    <el-table-column fixed="right" label="操作" width="160">
		      <template slot-scope="scope">
				<el-button @click="down(scope.row.id)" type="text" size="small" 
				style="color: #A8810B;" v-if="scope.row.status==2">
				   下载
				</el-button>
		        <el-button @click="look(scope.row)" type="text" size="small" style="color: #A8810B;" >
		         查看
		        </el-button>
				
				<el-button @click="add(scope.row.id)" type="text" size="small" style="color: #A8810B;" v-if="user_role==1">
				 编辑
				</el-button>
				
				<el-button @click="del(scope.row.id)" type="text" size="small" style="color: #A8810B;" v-if="user_role==1">
				 删除
				</el-button>
		      </template>
		    </el-table-column>
		</el-table>