amount-column v0.1.14

# npm
npm i amount-column

使用

<template>
  <div class="index">
    <AmountColumn v-model="val"/>
  </div>
</template>
<script>
import AmountColumn from 'amount-column';
export default {
  components: {
    AmountColumn
  },
  data() {
    return {
      val: ''
    };
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 300px;
  height: 80px;
  margin: 50px;
}
</style>

API

注意

需要将组件放到定义了高宽的 DOM 容器中

示例

<template>
  <div class="index">
    <el-table :data="tableData"
              style="width: 100%"
              :cell-style="{padding:'0px'}"
              :row-style="{height:'50px'}"
              :header-row-style="{height:'50px'}"
              :header-cell-style="{padding:'0px'}"
              border>
      <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="address">
        <template slot="header"
                  slot-scope="scope">
          <AmountColumn :input="false"
                        :border="false" />
        </template>
        <template slot-scope="scope">
          <AmountColumn v-model="scope.row.address"
                        :border="false"
                         readonly
                        :head="false" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// import MoneyInput from '@/components/MoneyInput.vue';
import AmountColumn from 'amount-column';
export default {
  components: {
    // MoneyInput,
    AmountColumn
  },
  data() {
    return {
      val: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '3234.123'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: 534534.34
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '346.12'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '123'
        }
      ]
    };
  },
  watch: {
    val: {
      handler(v) {
        console.log(v);
      }
    }
  },
  mounted() {
    console.log(AmountColumn);
  }
};
</script>

<style lang="less" scoped>
.index {
  height: 80px;
  margin: 50px;
}
.el-table /deep/ .cell {
  height: 50px;
}
</style>