collapse-tags,collapsetags

collapse什么意思

collapse: [ k?'l?ps ]

n. 崩溃,倒塌

v. 倒塌,崩溃,瓦解

词形变化:

形容词:collapsible 名词:collapsibility 动词过去式:collapsed 过去分词:collapsed 现在分词:collapsing 第三人称单数:collapses

例句与用法:

1. The wind caused the tent to collapse.

风把帐篷吹塌了。

2. Talks between management and unions have collapsed.

资方和工会的谈判失败了。

3. The whole building collapsed.

整个建筑倒塌了。

英英解释:

名词collapse:

1. an abrupt failure of function or health

2. a mishap caused by something suddenly falling down or caving in

3. the act of throwing yourself down

同义词：flop

4. a sudden large decline of business or the prices of stocks (especially one that causes additional failures)

同义词：crash

动词collapse:

1. break down, literally or metaphorically

同义词：fall in, cave in, give, give way, break, founder

2. collapse due to fatigue, an illness, or a sudden attack

同义词：break down

3. fold or close up

4. fall apart

同义词：crumble, crumple, tumble, break down

5. cause to burst

同义词：burst

6. suffer a nervous breakdown

同义词：crack up, crack, crock up, break up

7. lose significance, effectiveness, or value

css, border-collapse: collapse; //这是什么意思？定义了table和table, td, th 选择器。那如何工作呢？

1、border-collapse: collapse;

border-collapse属性是运用在table标签里的， collapse值会让 边框合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

2、border: 1px solid black;//这个是设置边框属性的，1px是边框的宽度，solid是设置边框的线条为实线， black是设置边框的颜色为黑色。

table, td, th {

border: 1px solid black; ////solid什么意思？

}

上面的意思同时定义3个标签的 边框属性为 border: 1px solid black;

卢松松程序Tags列表数量如何修改

用“数据有效性”制作下拉菜单的字体不可能重新设置，但是你说的用控件可以。方法如下：

1.视图-工具栏-控件工具。插入一个组合框。.

注意：工具栏上最左上边的按钮按下状态就是“设计模式”，未按下状态是“退出设计模式”。

2.设计模式下，在组合框上右击，选择“属性”：

按分类序

数据中:

ListRows的8改为30个(列表的显示项数30项)

杂项中:

LinkedCell改为D1 （下拉填入的单元格）

ListFillRange改为A1:A100 （下拉列表的源数据）

字体中:

点击宋体后面的...

可以修改字体样式和字体大小。

3.修改完成后，点“退出设计模式”即可使用了。（如果要修改先点“设计模式”，然后右击“属性”进行修改。）

element 树状下拉框

!--

? ? /**

? ? * 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用

? ? * @author sxy

? ? * @date 2020-12-02

? ? */

--

template

? div

? ? div v-show="isShowSelect" class="mask" @click="isShowSelect = !isShowSelect" /

? ? el-popover

? ? ? v-model="isShowSelect"

? ? ? placement="bottom-start"

? ? ? :width="width"

? ? ? trigger="manual"

? ? ? style="padding: 12px 0;"

? ? ? @hide="popoverHide"

? ?

? ? ? el-tree

? ? ? ? ref="tree"

? ? ? ? class="common-tree"

? ? ? ? :style="style"

? ? ? ? :data="data"

? ? ? ? :props="defaultProps"

? ? ? ? :show-checkbox="multiple"

? ? ? ? :node-key="nodeKey"

? ? ? ? :check-strictly="checkStrictly"

? ? ? ? default-expand-all

? ? ? ? :expand-on-click-node="false"

? ? ? ? :check-on-click-node="multiple"

? ? ? ? :highlight-current="true"

? ? ? ? @node-click="handleNodeClick"

? ? ? ? @check-change="handleCheckChange"

? ? ? /

? ? ? el-select

? ? ? ? slot="reference"

? ? ? ? ref="select"

? ? ? ? v-model="selectedData"

? ? ? ? :style="selectStyle"

? ? ? ? :size="size"

? ? ? ? :multiple="multiple"

? ? ? ? :clearable="clearable"

? ? ? ? :collapse-tags="collapseTags"

? ? ? ? class="tree-select"

? ? ? ? @click.native="isShowSelect = !isShowSelect"

? ? ? ? @remove-tag="removeSelectedNodes"

? ? ? ? @clear="removeSelectedNode"

? ? ? ? @change="changeSelectedNodes"

? ? ?

? ? ? ? el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /

? ? ? /el-select

? ? /el-popover

? /div

/template

script

export default {

? props: {

? ? // 树结构数据

? ? data: {

? ? ? type: Array,

? ? ? default() {

? ? ? ? return []

? ? ? }

? ? },

? ? defaultProps: {

? ? ? type: Object,

? ? ? default() {

? ? ? ? return {

? ? ? ? ? children: 'children',

? ? ? ? ? label: 'name'

? ? ? ? }

? ? ? }

? ? },

? ? // 配置是否可多选

? ? multiple: {

? ? ? type: Boolean,

? ? ? default() {

? ? ? ? return false

? ? ? }

? ? },

? ? // 配置是否可清空选择

? ? clearable: {

? ? ? type: Boolean,

? ? ? default() {

? ? ? ? return false

? ? ? }

? ? },

? ? // 配置多选时是否将选中值按文字的形式展示

? ? collapseTags: {

? ? ? type: Boolean,

? ? ? default() {

? ? ? ? return false

? ? ? }

? ? },

? ? nodeKey: {

? ? ? type: String,

? ? ? default() {

? ? ? ? return 'id'

? ? ? }

? ? },

? ? // 显示复选框情况下，是否严格遵循父子不互相关联

? ? checkStrictly: {

? ? ? type: Boolean,

? ? ? default() {

? ? ? ? return false

? ? ? }

? ? },

? ? // 默认选中的节点key数组

? ? checkedKeys: {

? ? ? type: Array,

? ? ? default() {

? ? ? ? return []

? ? ? }

? ? },

? ? size: {

? ? ? type: String,

? ? ? default() {

? ? ? ? return 'medium'

? ? ? }

? ? },

? ? width: {

? ? ? type: Number,

? ? ? default() {

? ? ? ? return 250

? ? ? }

? ? },

? ? height: {

? ? ? type: Number,

? ? ? default() {

? ? ? ? return 300

? ? ? }

? ? }

? },

? data() {

? ? return {

? ? ? isShowSelect: false, // 是否显示树状选择器

? ? ? options: [],

? ? ? selectedData: [], // 选中的节点

? ? ? style: 'width:' + (this.width - 24) + 'px;' + 'height:' + this.height + 'px;',

? ? ? selectStyle: 'width:' + (this.width + 24) + 'px;',

? ? ? checkedIds: [],

? ? ? checkedData: []

? ? }

? },

? watch: {

? ? isShowSelect(val) {

? ? ? // 隐藏select自带的下拉框

? ? ? this.$refs.select.blur()

? ? },

? ? checkedKeys(val) {

? ? ? console.log('checkedKeys', val)

? ? ? if (!val) return

? ? ? this.checkedKeys = val

? ? ? this.initCheckedData()

? ? }

? },

? mounted() {

? ? this.initCheckedData()

? },

? methods: {

? ? // 单选时点击tree节点，设置select选项

? ? setSelectOption(node) {

? ? ? const tmpMap = {}

? ? ? tmpMap.value = node.key

? ? ? tmpMap.label = node.label

? ? ? this.options = []

? ? ? this.options.push(tmpMap)

? ? ? this.selectedData = node.key

? ? },

? ? // 单选，选中传进来的节点

? ? checkSelectedNode(checkedKeys) {

? ? ? var item = checkedKeys[0]

? ? ? this.$refs.tree.setCurrentKey(item)

? ? ? var node = this.$refs.tree.getNode(item)

? ? ? this.setSelectOption(node)

? ? },

? ? // 多选，勾选上传进来的节点

? ? checkSelectedNodes(checkedKeys) {

? ? ? // this.$refs.tree.setCheckedKeys(checkedKeys)

? ? ? // 优化select回显显示 有个延迟的效果

? ? ? const that = this

? ? ? setTimeout(function() {

? ? ? ? that.$refs.tree.setCheckedKeys(checkedKeys)

? ? ? }, 10)

? ? ? // console.log('checkSelectedNodes', checkedKeys, this.selectedData)

? ? },

? ? // 单选，清空选中

? ? clearSelectedNode() {

? ? ? this.selectedData = []

? ? ? this.$refs.tree.setCurrentKey(null)

? ? },

? ? // 多选，清空所有勾选

? ? clearSelectedNodes() {

? ? ? var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据

? ? ? for (let i = 0; i checkedKeys.length; i++) {

? ? ? ? this.$refs.tree.setChecked(checkedKeys[i], false)

? ? ? }

? ? },

? ? initCheckedData() {

? ? ? if (this.multiple) {

? ? ? ? // 多选

? ? ? ? // console.log(this.checkedKeys.length)

? ? ? ? if (this.checkedKeys.length 0) {

? ? ? ? ? this.checkSelectedNodes(this.checkedKeys)

? ? ? ? } else {

? ? ? ? ? this.clearSelectedNodes()

? ? ? ? }

? ? ? } else {

? ? ? ? // 单选

? ? ? ? if (this.checkedKeys.length 0) {

? ? ? ? ? this.checkSelectedNode(this.checkedKeys)

? ? ? ? } else {

? ? ? ? ? this.clearSelectedNode()

? ? ? ? }

? ? ? }

? ? },

? ? popoverHide() {

? ? ? if (this.multiple) {

? ? ? ? this.checkedIds = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据

? ? ? ? this.checkedData = this.$refs.tree.getCheckedNodes() // 所有被选中的节点所组成的数组数据

? ? ? } else {

? ? ? ? this.checkedIds = this.$refs.tree.getCurrentKey()

? ? ? ? this.checkedData = this.$refs.tree.getCurrentNode()

? ? ? }

? ? ? this.$emit('popoverHide', this.checkedIds, this.checkedData)

? ? },

? ? // 单选，节点被点击时的回调,返回被点击的节点数据

? ? handleNodeClick(data, node) {

? ? ? if (!this.multiple) {

? ? ? ? this.setSelectOption(node)

? ? ? ? this.isShowSelect = !this.isShowSelect

? ? ? ? this.$emit('change', this.selectedData)

? ? ? }

? ? },

? ? // 多选，节点勾选状态发生变化时的回调

? ? handleCheckChange() {

? ? ? var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据

? ? ? // console.log('handleCheckChange', checkedKeys)

? ? ? this.options = checkedKeys.map((item) = {

? ? ? ? var node = this.$refs.tree.getNode(item) // 所有被选中的节点对应的node

? ? ? ? const tmpMap = {}

? ? ? ? tmpMap.value = node.key

? ? ? ? tmpMap.label = node.label

? ? ? ? return tmpMap

? ? ? })

? ? ? this.selectedData = this.options.map((item) = {

? ? ? ? return item.value

? ? ? })

? ? ? this.$emit('change', this.selectedData)

? ? },

? ? // 多选,删除任一select选项的回调

? ? removeSelectedNodes(val) {

? ? ? this.$refs.tree.setChecked(val, false)

? ? ? var node = this.$refs.tree.getNode(val)

? ? ? if (!this.checkStrictly node.childNodes.length 0) {

? ? ? ? this.treeToList(node).map(item = {

? ? ? ? ? if (item.childNodes.length = 0) {

? ? ? ? ? ? this.$refs.tree.setChecked(item, false)

? ? ? ? ? }

? ? ? ? })

? ? ? ? this.handleCheckChange()

? ? ? }

? ? ? this.$emit('change', this.selectedData)

? ? },

? ? treeToList(tree) {

? ? ? var queen = []

? ? ? var out = []

? ? ? queen = queen.concat(tree)

? ? ? while (queen.length) {

? ? ? ? var first = queen.shift()

? ? ? ? if (first.childNodes) {

? ? ? ? ? queen = queen.concat(first.childNodes)

? ? ? ? }

? ? ? ? out.push(first)

? ? ? }

? ? ? return out

? ? },

? ? // 单选,清空select输入框的回调

? ? removeSelectedNode() {

? ? ? this.clearSelectedNode()

? ? ? this.$emit('change', this.selectedData)

? ? },

? ? // 选中的select选项改变的回调

? ? changeSelectedNodes(selectedData) {

? ? ? // 多选,清空select输入框时，清除树勾选

? ? ? if (this.multiple selectedData.length = 0) {

? ? ? ? this.clearSelectedNodes()

? ? ? }

? ? ? this.$emit('change', this.selectedData)

? ? }

? }

}

/script

style scoped

? .mask {

? ? width: 100%;

? ? height: 100%;

? ? position: fixed;

? ? top: 0;

? ? left: 0;

? ? opacity: 0;

? ? z-index: 11;

? }

? .common-tree {

? ? overflow: auto;

? }

? .tree-select {

? ? z-index: 111;

? }

/style