cr/src/view/tableHead.vue

<template>
<section>
        <div id="child_menu">
	        <div class="left">
		        <label>行数</label>
		        <input type="text" style="width: 40px" v-model="sum_copy"/>
		        <label @click="changeSum" style="cursor: pointer">确认</label>
	        </div>
            <div class="right">
                <label>设置</label> &nbsp;&nbsp;&nbsp; <label>删除</label>
            </div>
        </div>
        <child v-bind:sum="this.sum"></child>
        
  
  <div id="setting" >
    <div id="Attribute">
      <div style="color: red;font-weight: bolder;text-align: center;font-size: 14px;">抬 头</div>
      <table :title="form && form.id ? '编辑' : '新增' "  :model="form">
        <tr>
          <td>名称</td>
          <td colspan="3"><input type="text" v-model="form_copy.name"/></td>
        </tr>
        <tr>
          <td>字体</td>
          <td>
            <select v-model="form_copy.fontFamily"  style="width:80px;border: #0342c5 1px solid;">
              <option value="黑体">黑体</option>
              <option value="楷体">楷体</option>
              <option value="微软雅黑">微软雅黑</option>
              <option value="宋体">宋体</option>
            </select>
          </td>
          <td>字高</td>
          <td><input type="text" v-model="form_copy.fontSize"/></td>
        </tr>
        <tr>
          <td>字距</td>
          <td colspan="3">
            <input type="text" style="width:50px;margin-right: 14px;" v-model="form_copy.letterSpacing" />
            线粗
            <input type="text" style="width:50px" v-model="form_copy.thickness"/></td>
        </tr>
        <tr>
          <td>长度</td>
          <td colspan="3">
            <input type="text" style="width:45px;margin-right: 14px;" v-model="form_copy.width" />
            距抬头
            <input type="text" style="width:45px" v-model="form_copy.marginTop"/></td>
        </tr>
        <tr>
          <td>字组</td>
          <td colspan="3"><input type="text" v-model="form_copy.content" /></td>
        </tr>
        <tr>
          <td colspan="4">
           <label>着色 <input type="color"  v-model="form_copy.color" style="width: 40px;"/></label>
            &nbsp;
            <button type="primary"  @click="fittingPreview">预览</button>
            &nbsp;
            <button type="primary"  @click="fittingSave">提交</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="fitting">
      <div style="margin:70px auto 0" :style="{width:form.width+'px',letterSpacing:form.letterSpacing+'px'}">
          <div>{{form.content}}</div>
          <hr :style="{borderBottom:form.thickness+'px solid '+form.color,marginTop:form.marginTop+'px'}" />
      </div>
    </div>
  </div>
</section>
</template>
<script>
import child from '@/components/common/list';

let data = () => {
  return {
    collapsed: false,
	sum:1,
    sum_copy:1,
    form_copy:{
        width:250,
        color:'red'
    },
    form:{
        width:250,
        color:'red'
    }
  }
}

let changeSum = function(){
    this.sum = this.sum_copy * 8
}
let findAll = function() {
  this.$axios.get("/api/columns/singleColumn/findAll").then(response => {
      if (response.data.code == 0) {
        this.rows = response.data.list;
      }
    })
    .catch(error => {
      console.log(error);
      this.message = error;
    });
};

let fittingSave = function(){
   this.$axios.post('/api/columns/singleColumn/saveOrUpdate', this.form).then(response => {
     if (response.data.code == 0) {
        this.findAll()
        this.form = {}
      }
   })
   .catch(error => {
      console.log(error);
      this.message = error;
    });
}

let fittingEdit = function(index){
  this.form = this.rows[index]
}

let settingShow = function(){
  this.form = {}
}

let fittingPreview = function(){
  if(this.form_copy.width=="") this.form_copy.width=0
  this.form =  Object.assign({}, this.form_copy)
}

export default {
    data: data,
    methods: {
      findAll,
      fittingSave,
      fittingEdit,
      settingShow,
      changeSum,
      fittingPreview
    },
    mounted: function() {
      this.findAll();
    },
    components:{
      child
    }
}
</script>
<style scoped>
hr{
    border: none;
    border-bottom: red solid 1px;
}
</style>