表格样式

<template>
        <el-table
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{'text-align':'center'}"
          style=" background-color: rgba(255,255,255,0.1);font-size: 20px"
          v-bind:data="tableData.results"
          v-bind:height="(fulHeight-210)+'px'"
        >
          <el-table-column
            label="ID"
            min-width="8%"
            prop="id"
          />
          <el-table-column
            label="添加日期"
            min-width="40%"
            prop="create_date"
          />
          <el-table-column
            label="操作详情"
            min-width="20%"
            prop="action"
          />
          <el-table-column
            label="用户名"
            min-width="15%"
            prop="user.username"
          />
          <el-table-column
            label="操作"
            min-width="15%"
          >
            <template slot-scope="scope">
              <el-button type="info" @click="dialogFormVisible = true" style="width: 70%;font-size: 20px">添加</el-button>
              <el-button type="info" @click="deletelist(scope.row)" style="width: 70%;font-size: 20px">删除</el-button>
              <el-button type="info" @click="fixlist(scope.row)" style="width: 70%;font-size: 20px">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 弹框 -->
      <el-dialog :visible.sync="dialogFormVisible" v-bind:width="dialogwidth +'px'" style="margin: 50px auto;" title="操作">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="ID">
          <el-input v-model="form.id" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="添加日期">
          <el-input v-model="form.create_date" autocomplete="off"  style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="操作详情">
          <el-input v-model="form.action" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="请求参数">
          <el-input v-model="form.request_parame" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input v-model="form.user.username" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 20%;font-size: 20px" type="info" @click="dialogFormVisible = false">取&nbsp;&nbsp;消</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button style="width: 20%;font-size: 20px" type="primary" @click="addlist()">确&nbsp;&nbsp;定</el-button>
      </div>
    </el-dialog>
      <el-dialog :visible.sync="dialogVisible " v-bind:width="dialogwidth +'px'" style="margin: 50px auto;" title="操作">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="ID">
          <el-input v-model="form.id" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="添加日期">
          <el-input v-model="form.create_date" autocomplete="off"  style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="操作详情">
          <el-input v-model="form.action" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="请求参数">
          <el-input v-model="form.request_parame" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input v-model="form.user.username" autocomplete="off" style="font-size: 20px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 20%;font-size: 20px" type="info" @click="dialogVisible = false">取&nbsp;&nbsp;消</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button style="width: 20%;font-size: 20px" type="primary" @click="Fixtable()">确&nbsp;&nbsp;定</el-button>
      </div>
    </el-dialog>

<script>
export default {
	data(){
		return{
			tableData: {
		        results: [],
		        filter: {
		          limit: 10,
		          offset: 0,
		          ordering: '-id'
		        }
	    	},
	    	 dialogFormVisible: false,
	    	 dialogVisible :false,
		     formLabelWidth: '120px',
		     form: {
		        id: '',
		        create_date: '',
		        update_date: '',
		        action: '',
		        request_parame: '',
		        user: '',
		        findTime: ''
		      }
		}
	},
	created(){
		axios.get('接口地址')
		.then( (res) = >{
			console.log(res)
			this.dableData.results = res.data   //根据获取到的后台数据赋值给表格绑定的数据	
			
		})
		.catch((err)=>{
			console.log(err)
		})
	},
	methods:{
		//添加表格内容
		addlist(){
			axios.post('接口地址'，{
				id:this.form.id,
				create_date:this.form.create_date,
				update_date:this.form.update_date,
				action:this.form.action,
				request_parame:this.form.request_parame,
				user:this.form.user,
				findTime:this.form.findTime,
			})
			.then((res)=>{
				this.tableData.push({
					id:this.form.id,
					create_date:this.form.create_date,
					update_date:this.form.update_date,
					action:this.form.action,
					request_parame:this.form.request_parame,
					user:this.form.user,
					findTime:this.form.findTime,
				})
			})
			this.dialogFormVisible = false
		},
		//删除表格内容
		delatelist(index,row){
			rows.splice(index, 1);
		},
		//修改表格内容
		fixlist(row){
			this.dialogVisible = true
			this.form = row
		},
		Fixtable(){
			axios.patch('接口地址',{
				id:this.form.id,
				create_date:this.form.create_date,
				update_date:this.form.update_date,
				action:this.form.action,
				request_parame:this.form.request_parame,
				user:this.form.user,
				findTime:this.form.findTime,
			})
			.then((res)=>{
			})
			.catch((err)=>{
			})
		},
	},
}
	
    </script>