He wrote about the common language of management:
1. The list of commonly used words appear while you're typing;
2. Click the content into the input box;
3. Click the Settings button on the list, it can be managed common language.
Code section:
A box appears when clicking the input box below it to display a list of commonly used, with a < EL-the popover Placement = "bottom" width = "300" Trigger = "the Click" > </ EL-the popover> the popover popup
<el-popover placement="bottom" width="300" trigger="click"> <el-table :data="dataList" border style="width: 100%;"> <el-table-column fixed="left" prop="content" label="常用语"> <template slot-scope="scope"> <el-button type="text" size="small" @click="showState(scope.row.content)">{{scope.row.content}}</el-button> </template> </el-table-column> </el-table> <el-form><el-form-item></el-form-item></el-form> <div style="text-align: center"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-button type="primary" style="display:block;margin:0 auto" @click="addOrUpdateHandle()">设置常用语</el-button> </el-form-item> </el-form> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> <el-input slot="reference" v-model="obj" style="width:300px" placeholder="请输入内容"></el-input> </el-popover>
Wherein <el-input> </ el-input> page is input box, the other for the contents popup
To get the data back through the list of display method:
<script> import AddOrUpdate from './cyy_apply' export default { data () { return { dataList: [], addOrUpdateVisible: false, obj: '' } }, components: { AddOrUpdate }, mounted () { this.getDataList() }, activated () { this.getDataList() }, methods: { showState (val) { this.obj = val }, getDataList () { this.dataListLoading = true this.$http({ url: this.$http.adornUrl('/cyy/apply/selectByCreateUserId'), method: 'get' }).then(({data}) => { if (data && data.code === 0) { this.dataList = data.list } else { this.dataList = [] } }) }, // 常用语设置 setLanguage (id) { this.$nextTick(() => { this.$router.push({name: 'cyy_apply'}) }) } } } </script>
After clicking the Settings button common language, according to the path jump to the management page to manage.